Palette Field FAQ

Palette Field provides free utilities for colour palettes, WCAG contrast checks, CSS gradients, box shadows, type scales, and spacing scales. Everything is generated in your browser and the output is plain CSS you can paste into any project.

How is the contrast ratio calculated?

It follows the WCAG 2 definition: relative luminance is computed for each colour from its linearised sRGB channels, then the lighter value plus 0.05 is divided by the darker value plus 0.05. The result runs from 1:1 for identical colours to 21:1 for black on white.

Which contrast thresholds do I need to meet?

WCAG 2 AA requires 4.5:1 for normal body text and 3:1 for large text, roughly 24px or 19px bold. AAA raises those to 7:1 and 4.5:1. User interface components and meaningful graphics need 3:1 against adjacent colours. Purely decorative elements and disabled controls are exempt.

Does passing a contrast ratio make a design accessible?

No. Contrast is one requirement among many. Colour must never be the only way information is conveyed, so status, links, and errors need a second cue such as an icon, underline, or label. Focus order, keyboard operation, and semantic markup are separate obligations that no colour tool can check.

Are generated palettes accessible by default?

No. The palette generator rotates hue around your base colour while holding saturation and lightness, which produces harmony rather than contrast. Run every text and background pair you intend to use through the contrast checker before committing the palette.

Why does my gradient look grey in the middle?

Browsers interpolate linear gradients in sRGB by default. Two saturated hues on opposite sides of the colour wheel pass through a desaturated midpoint on the way, which reads as muddy grey. Adding an intermediate colour stop or choosing closer hues avoids it.

Which type scale ratio should I choose?

Dense application interfaces usually work best between 1.125 and 1.2, where steps stay close together and vertical space is scarce. Editorial layouts can carry 1.25 to 1.5, where large headings have room. Round the generated values to whole pixels or a rem grid, and check both the smallest and largest steps on a phone — scales break at the extremes.

Should my spacing scale use a 4px or 8px base?

A 4px base gives finer control for compact interfaces; an 8px base produces fewer, more clearly distinct steps. Either works provided it is applied consistently to gaps, padding, and layout rhythm, so the whole page sits on one grid.

Is anything uploaded or saved?

No. Colours, sizes, and generated CSS stay in your browser. Nothing is transmitted to a server and nothing persists after you close the tab.