Choose website colors by checking the foreground-and-background pairs used in each component—not by labeling individual swatches “accessible.” For WCAG 2.2 AA, ordinary text generally needs a contrast ratio of at least 4.5:1 and large text at least 3:1. Meaningful controls and graphics need a separate review, and color should not be the only cue that communicates information.
Start with the roles and combinations in your interface
Before choosing or approving colors, list where they will appear and what they need to communicate. A palette can pass one contrast check and still fail in another pairing: the same accent might work for a large heading but not for small button text.
- Body text, headings, muted text, and placeholder text
- Links and their hover, focus, and visited treatments
- Buttons, form fields, borders, and focus or selection indicators
- Status messages such as success, warning, and error
- Icons, chart marks, diagrams, and other meaningful graphics
Include the actual background in each check. It may be a solid surface, an image, a gradient, or a component state. W3C guidance covers text over images and gradients as well as buttons and other interface elements (WCAG 2.2, Contrast (Minimum); W3C WAI: Tips on Designing for Web Accessibility).
Assign palette tokens by function
Name colors for the roles they serve, such as page background, body text, muted text, interactive accent, border, success, warning, and error. Then define the intended foreground/background pairing for each component and state. For example, specify both the button fill and its text color rather than treating the fill color as a complete button specification.
#1 Best Overall
This approach makes it easier to review a design system: teams can see which combinations are approved for small text, large text, controls, or graphics, and avoid reusing a color pairing in a context where it no longer works.
Check text against WCAG 2.2 AA thresholds
WCAG 2.2 Success Criterion 1.4.3 sets a minimum contrast ratio of 4.5:1 for ordinary text and 3:1 for large text at Level AA. The criterion defines large text as at least 18 point (24 CSS pixels) regular, or at least 14 point (about 18.66 CSS pixels) bold. It also specifies exceptions, including incidental text and logotypes; check the criterion for the full definitions (W3C WCAG 2.2 Understanding: Contrast (Minimum)).
These ratios describe a relationship between foreground and background, not a permanent property of a hex value. The same text color can pass on one surface and fail on another. WCAG contrast calculations are based on relative luminance; hue and saturation alone do not determine whether text has enough contrast.
Check text that appears in the real interface, including placeholders and text shown on hover or focus. Do not approve only the default state if the text color or background changes when someone interacts with the component.
Rank #3
Review meaningful controls and graphics separately
Text passing 1.4.3 does not establish that adjacent icons, control boundaries, or chart marks are distinguishable. WCAG 2.2 Success Criterion 1.4.11, Non-text Contrast, separately addresses visual information needed to identify user-interface components and meaningful graphical objects (W3C WCAG 2.2 Understanding: Non-text Contrast).
In practice, inspect whether a control’s boundary or state indicator can be distinguished from its surroundings, and whether meaningful lines, symbols, or chart categories remain visible. Decorative elements that convey no information are different from graphics users need to interpret the content.
Make meaning available without color
Do not rely on hue alone to identify a link, error, status, or chart category. Pair color with another cue, such as a visible text label, an icon, a shape, an underline, or a pattern. For example, a form error should include an explanatory message or icon in addition to a red border; a chart should distinguish series with labels or patterns as well as color.
This is a separate design check from contrast. A color pairing can meet a ratio and still leave information inaccessible if color is its only signal. W3C’s design tips advise against using color alone to convey information (W3C WAI: Tips on Designing for Web Accessibility).
Free tools Windows power users keep installed
One-click scans. No signup required.
Best Value
Use a repeatable palette review
- List real pairings. Record each foreground and background combination for text, controls, and meaningful graphics, including interactive states and image or gradient backgrounds.
- Assign the applicable check. For text, apply the WCAG 2.2 AA text threshold appropriate to its size. For meaningful non-text controls and graphics, review the separate non-text contrast criterion.
- Compare candidate combinations in context. Judge each option by its intended role, applicable criterion, actual rendering, and whether the conveyed information remains available without distinguishing hue.
- Use a contrast checker, then inspect the rendered component. A numerical result helps test a pairing, but it cannot show every issue caused by an image, gradient, state, or surrounding interface.
- Make changes while the palette is still being designed. W3C WAI’s “Colors with Good Contrast” resource says, “This is ideally done during the early design stage and the selection of color palettes” (W3C WAI: Colors with Good Contrast).
Do not treat a color-blindness simulation as a substitute for contrast checks or review of the actual interface. Palette compliance alone also cannot establish that a whole website is accessible: content, implementation, component states, and the meaning carried by non-text content all matter.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
