A palette that looks beautiful and fails contrast is a palette you will rebuild. Accessibility is far cheaper as a constraint you design within from the first swatch than as a test you scramble to pass the week before launch. The good news: the rules are few, they are numeric, and a generator can check them while you work.
Key takeaways
- Body text needs a 4.5:1 contrast ratio; large text needs 3:1; AAA asks for 7:1.
- Contrast tracks lightness far more closely than hue, so fix failures with lightness.
- Every palette needs at least one passing text-and-background pairing before it is a palette.
- Color alone must never be the only signal separating two states or meanings.
What the WCAG contrast ratio measures
The contrast ratio compares the relative luminance — the perceived brightness — of two colors. It runs from 1:1 for identical colors to 21:1 for black on white. The Web Content Accessibility Guidelines set three thresholds worth memorizing:
- 4.5:1 for normal body text (level AA).
- 3:1 for large text, roughly 24px, or 18.66px when bold (AA Large).
- 7:1 for the stricter AAA level, sensible for long-form reading.
Crucially, the ratio depends on lightness far more than on hue. Two vivid colors of similar lightness can look striking side by side and still fail badly the moment one carries text.
Decide text pairings before you fall in love
As soon as a palette appears, identify which color will carry text and which will sit behind it. If your only dark color fails against your only light color, the palette has no legal text pairing and needs fixing now — not after a layout has been built on top of it. This single habit prevents most late-stage accessibility rework.
A palette needs at least one pairing that passes 4.5:1 for body text. If it does not, you do not have a palette yet — you have a mood board.
Use lightness as your lever
When a pairing fails, resist changing the hue; that is the part carrying your brand. Push the text color darker or the background lighter instead. Because the ratio tracks lightness, a shift of a few percent often flips a fail into a pass while leaving the color's character intact. The converter shows the HSL lightness value, so you can adjust by number rather than by nudging a picker and hoping.
Build a ramp, not two colors
Interfaces need more than one dark and one light. Generate a short ramp from each brand color — a very light tint for backgrounds, a mid tone for borders and icons, a deep shade for text — and record the contrast ratio of each step against your surface. A ramp turns accessibility from a per-decision judgment into a lookup: designers pick the step that passes, and no one has to re-derive it.
Never let color carry meaning alone
Contrast handles legibility, but meaning is a separate problem. If the only difference between a valid field and an error is red versus green, users who cannot distinguish those hues receive no information at all. Pair every color signal with a second channel: an icon, a label, a border weight, or a shape. This overlaps directly with designing for color blindness, where the same principle is the whole discipline.
Test the real thing, not the swatch
Numbers are necessary but not sufficient. Preview actual text at its real size on the real background. Thin fonts, small sizes, translucent overlays and text sitting on photographs all erode effective contrast in ways a raw ratio cannot capture. Run every pairing through the contrast checker, then look at it with your own eyes on a real screen at real brightness.
Write the pairings down
The habit that makes accessibility stick across a team is documentation, not diligence. For every background color in the system, record the one or two text colors that pass against it and the ratio each achieves. Keep that table beside the palette itself — in the design file, in the token comments, in the brand guide — so nobody has to re-derive it under deadline pressure. Teams that skip this step do not fail because they lack care; they fail because the information lives in one person's memory. A written pairing table converts an accessibility judgment into a lookup, and lookups survive staff changes, redesigns and the last busy week before a launch.
Frequently asked questions
Do icons and buttons need to pass contrast too?
Yes. Meaningful graphics and interface components need at least 3:1 against their background, and any text inside a button follows the normal 4.5:1 text rule.
Does a large heading really only need 3:1?
That is the minimum the guidelines allow, but large text at 3:1 is genuinely hard to read on a bright screen. Treat 3:1 as a floor for display type, not a target.
Can a brand color be exempt from contrast rules?
Not where it carries text. Keep the brand color for large brand moments and derive a darker variant of the same hue for the places that must be read.
Accessible palettes and beautiful palettes are the same palettes, built in a different order. For the full method, see the guide to building accessible color palettes.
