Color & design

Check Color Contrast Without Claiming ADA Certification

Use WCAG contrast measurements as evidence, distinguish text and control requirements, and avoid treating one passing color pair as ADA certification.

By Uddhav Gopani, FounderPublished 27 September 2026Updated 29 September 2026

Translate the color question into a measurable task

There is no standalone hex color that is “ADA compliant” in every use. A color can be readable on one surface and unreadable on another, and the Americans with Disabilities Act concerns access to services and information more broadly than one color comparison. For the practical color question, identify a foreground/background pair, the information it communicates and the relevant accessibility criterion.

Use the Color Contrast Checker for that pair. A website-availability checker answers whether a resource appears reachable and cannot evaluate color contrast. Neither an uptime result nor a numerical contrast pass establishes legal compliance of a website. Keep the tool’s actual output connected to the specific evidence it can provide.

Identify the applicable accessibility framework

The Department of Justice’s web-accessibility guidance explains that poor contrast and information conveyed only by color can create access barriers. Its rule for web content and mobile apps provided by state and local governments uses WCAG 2.1 Level AA as a technical standard, with the rule’s scope and exceptions. That Title II framework should not be casually described as an identical rule for every private website.

Consult the current official guidance for the entity and service being reviewed, including the applicable requirements and any exceptions. A design review can produce reliable technical evidence without claiming that a color calculator resolves all legal questions. State the criterion and version used in the report instead of replacing them with an unexplained “ADA pass” badge.

Measure a concrete text pair

For ordinary text under WCAG AA, compare against the 4.5:1 minimum. Qualifying large text uses a 3:1 threshold. In the local checker, #777777 on #ffffff produces about 4.48:1 and fails the ordinary-text minimum. Changing the text to #595959 on white produces about 7.00:1, with an unrounded result above seven, and passes ordinary-text AA.

The checker accepts two opaque six-digit hex colors. It does not inspect the font, determine whether a heading qualifies as large, or scan your page. Use the actual rendered typography and surface when interpreting the result. If the text is translucent or sits over an image, identify the final composited colors and the least favorable relevant area rather than entering unrelated brand swatches.

Review controls and states beyond their labels

A button label can have sufficient text contrast while the button’s essential boundary or focus indication remains difficult to identify. Meaningful non-text controls and states have their own contrast considerations. Check the feature that communicates the information and its adjacent colors. Do not assume the four text classifications in a pair calculator automatically evaluate every control feature.

Include hover, keyboard focus, selected, error and expanded states when their appearance changes. A pale error border can be hard to see, and red text alone may fail to communicate the error to someone who cannot distinguish that hue. Add a clear error message and appropriate programmatic association rather than relying on a color change as the entire interaction.

Keep essential meaning available without color

For required fields, include a visible word or explained symbol and expose the requirement appropriately. For charts, use labels or patterns where needed to distinguish meaningful series. For status indicators, provide text such as “Saved” or “Action needed.” Increasing the luminance contrast of a red and green pair does not by itself ensure that their intended meanings are available to every user.

These choices should be checked in the actual workflow. A form may have readable labels but still be impossible to submit with a keyboard. A graph may have well-separated colors yet lack an accessible explanation of its data. Color review belongs alongside those interaction and information checks, not in place of them.

Report findings at the level the evidence supports

Record the component, state, foreground, background, ratio, typography and criterion. Preserve unresolved image or layering cases for manual review rather than marking them as passed because a scanner produced no issue. After a fix, recheck the delivered page and its relevant responsive layouts. Keep a route for users to report barriers that automated or sampled testing missed.

Use the DOJ web-accessibility guidance, the state and local government web-rule fact sheet and W3C contrast guidance for their respective scopes. A useful conclusion is that a specified pair meets a specified contrast criterion in a documented context. A blanket legal certification requires evidence far beyond that measurement.