For WCAG 2.2 Level AA, normal text generally needs at least 4.5:1 contrast and large text at least 3:1. Apply the relevant exceptions and check the actual colors behind the text. Passing one color pair does not establish that a page meets all accessibility requirements.
Contrast is one part of readability
Low contrast can make text and controls difficult to distinguish. Font size, weight, spacing, screen conditions, and the user's needs also affect readability.
WCAG provides measurable contrast criteria. A tool can calculate a color ratio, but the author must identify the relevant text, background, state, and requirement.
Legal requirements depend on jurisdiction and the service. This article explains technical criteria; it does not establish legal compliance.
How Contrast Is Measured
Contrast is expressed as a ratio between 1:1 and 21:1. Identical colors are 1:1; pure black on pure white is 21:1. The ratio is calculated from the relative luminance of the two colors — a measure of perceived brightness.
The crucial point: contrast cannot be judged by eye. Two colors that look "different enough" to a designer on a calibrated monitor can fail badly for a user on a cheap screen in daylight. The ratio is a measurement, and it must be measured. Paste a text color and a background color into the FindUtils Contrast Checker and it calculates the ratio for the supplied colors.
Text and non-text thresholds
WCAG has A, AA, and AAA conformance levels. These contrast criteria apply at AA or AAA:
| Criterion | Normal text | Large text | Relevant non-text information |
|---|---|---|---|
| AA text minimum | 4.5:1 | 3:1 | Separate non-text criterion |
| AAA enhanced text | 7:1 | 4.5:1 | Separate criteria apply |
| AA non-text contrast | Not the text criterion | Not the text criterion | 3:1 where required |
Large text means at least 18 points, or at least 14 points when bold. The text criterion has exceptions, including logos and some incidental text. Do not round a failing ratio up to the threshold. See W3C's contrast minimum explanation.
Non-text contrast applies to visual information needed to identify controls, states, and meaningful graphics, with stated exceptions. It does not require every decorative border to meet 3:1. See W3C's non-text contrast explanation.
Check focus, selection, hover, disabled states, and both themes according to the criteria that apply. A single static swatch does not cover the full component.
Example: gray text on white
The color #999999 on white has a contrast ratio of about 2.85:1. It fails the 4.5:1 threshold for normal text and the 3:1 threshold for large text.
Use the Contrast Checker to compare a darker text color or a different background. Leave enough margin that later color changes do not create a borderline failure.
This is a calculated example, not a claim about the frequency of this defect across the web.
How to Fix Failing Colors
When a color pair fails, you have a few levers:
- Darken the text (or lighten it, on a dark background). This is the most common fix and usually the least disruptive.
- Adjust the background. Sometimes the background is the problem — a mid-tone background squeezes contrast on both light and dark text.
- Work in HSL. Adjusting lightness is far more predictable in HSL than HEX. Convert your color with the FindUtils Color Converter, drop the lightness, and re-check.
- Reserve brand colors for large text. A color can pass the large-text threshold while failing the normal-text threshold. Measure it before use.
- Check gradients and overlays. Check text against every area of a gradient or image that it covers. The lowest-contrast area is not always the lightest.
Tools Used in This Guide
- Contrast Checker — Measure contrast ratio and check WCAG AA/AAA
- Color Converter — Convert colors to HSL to adjust lightness precisely
- Color Palette Generator — Build palettes with accessibility in mind
- Gradient Generator — Create gradients and check text contrast over them
Frequently asked questions
Does a passing color pair make a page accessible?
No. It checks one requirement in one context. Keyboard access, semantics, labels, text resizing, and other requirements need separate review.
Can I round 4.49:1 up to 4.5:1?
No. Compare the unrounded value with the threshold.
Which part of a gradient should I test?
Check every background area the text covers. The lowest contrast area can be light or dark depending on the text color.
Does every button border need 3:1 contrast?
No. Determine which visual information is needed to identify the control or state. Apply the non-text criterion and its exceptions.
Can I check translucent colors as if they were solid?
No. Use the resulting composited colors against the actual background.
Does a contrast tool establish legal compliance?
No. It provides a technical result. Legal applicability and complete accessibility conformance require separate assessment.
Next Steps
- Read the contrast checker guide for a full walkthrough
- Master color formats with the color converter guide
- Check your colors with the Contrast Checker
- Browse the complete guide to online image tools for more free utilities
