DOFIW ACCESSIBILITY GUIDE
WCAG Color Contrast Explained: Ratios, AA, AAA, and Practical Examples
A practical guide to choosing readable text colors, applying the correct WCAG threshold, testing real interfaces, and fixing combinations that fall short.
Reviewed against WCAG 2.2 guidance · Written for designers, developers, and content editors
What a color contrast ratio actually means
A contrast ratio describes the difference in relative luminance between two colors. In plain language, it measures how far apart the lighter and darker colors are in perceived brightness. The result is written as a ratio, such as 4.5:1.
The possible range starts at 1:1, where the foreground and background have the same luminance, and reaches 21:1 for black against white. Hue names do not determine the answer. Two colors can look very different—blue and red, for example—while still being too similar in luminance for small text.
The formula always places the lighter color first, so swapping foreground and background does not change the numerical ratio. It may still change the design’s readability in practice because type weight, spacing, glare, and the size of each color area affect perception.
WCAG AA and AAA contrast requirements
WCAG separates text into normal and large-scale categories. It also separates the minimum Level AA requirement from the more demanding Level AAA target. The table below is the quickest reference.
| Text category | Level AA | Level AAA | Typical use |
|---|---|---|---|
| Normal text | 4.5:1 | 7:1 | Body copy, labels, helper text, navigation |
| Large-scale text | 3:1 | 4.5:1 | Qualifying large headings or display text |
A computed result of 4.499:1 does not meet a 4.5:1 requirement, even if a display rounds it to 4.50. Use the unrounded result when deciding pass or fail.
What counts as large text?
For Roman text, WCAG defines large scale as at least 18 point when not bold, or at least 14 point when bold. In CSS terms, W3C notes that these are approximately 24px and 18.5px because 1pt equals 1.333 CSS pixels. Font weight and unusual or very thin letterforms still matter, so treating borderline text as normal text is the safer choice.
Do not assume that every heading qualifies. A heading is a semantic role, not a size guarantee. Measure the delivered font size and weight rather than the HTML element name.
Four examples that show why decimals matter
These examples use white backgrounds and exact hexadecimal foreground colors. The two middle grays look nearly identical, yet they fall on opposite sides of the Level AA threshold for normal text.
#767676 on #FFFFFF clears 4.5:1, but does not reach AAA.
#777777 is only one RGB step lighter, yet it misses the threshold.
#949494 may qualify for sufficiently large text, not normal body copy.
#555555 provides more margin for thin rendering and difficult conditions.
Passing at the exact minimum is not always the best design decision. W3C notes that anti-aliasing can make thin or unusual fonts appear fainter than the CSS color suggests. When the design allows it, choose a stronger ratio and a readable typeface instead of aiming for the smallest possible pass.
How to test text contrast step by step
- Identify the exact foreground color.Use the computed text color from the browser, not a color guessed from a screenshot.
- Identify the actual adjacent background.Check the color, gradient, image region, overlay, hover state, or selected state directly behind the text.
- Classify the delivered text size and weight.Use the normal-text threshold unless the text clearly meets the large-scale definition.
- Calculate without rounding.Compare the full result with 3:1, 4.5:1, or 7:1 as required.
- Test every meaningful state.Include default, hover, focus, visited, selected, error, disabled, and placeholder text where applicable.
- Review the real presentation.Check thin fonts, overlays, images, responsive breakpoints, and user-adjustable themes rather than stopping at one token pair.
For a single pair, enter the foreground and background in the DOFIW Color Contrast Checker. For several brand or interface colors, the Color Palette Accessibility Checker reveals which combinations meet each text threshold.
How to fix a color pair that fails
A failed pair does not automatically require black text or a discarded brand palette. It requires more luminance distance between the foreground and background used in that context.
Darken the text
Often the smallest repair for gray body text on a light surface. Preserve the background and increase text luminance contrast.
Lighten the background
Useful when a foreground brand color must remain fixed and the surface color has more flexibility.
Use a stronger token by role
Keep decorative brand shades, but assign a darker token to text, icons, borders, and focus indicators.
Add a solid backing layer
For text over photography, use a sufficiently opaque panel, scrim, or text background instead of testing one favorable pixel.
If you want nearby alternatives while holding one color fixed, use the Accessible Color Suggestion Tool. Its suggestions are practical starting points; review each result against the full visual system.
Text contrast is not the same as non-text contrast
WCAG 1.4.3 and 1.4.6 address text and images of text. Important interface visuals are considered separately under WCAG 1.4.11 Non-text Contrast. Visual information needed to identify user-interface components and their states generally needs at least 3:1 against adjacent colors. The same 3:1 principle also applies to parts of graphics needed to understand the content.
Text examples
Body copy, button labels, placeholder text, form instructions, tooltips, and text shown on hover or keyboard focus.
Non-text examples
Input boundaries needed to locate a field, selected-state indicators, meaningful chart lines, icons that communicate function, and custom focus indicators.
A control may therefore contain more than one contrast relationship: the label against the button fill, the button boundary against the page, and the focus indicator against adjacent colors. Test each relationship under the criterion that covers its purpose.
Exceptions—and what they do not excuse
WCAG 1.4.3 lists limited exceptions for text that is incidental, purely decorative, invisible to everyone, part of an inactive interface component, or part of a picture containing significant other visual content. Text within a logo or brand name is also exempt from the text contrast requirement.
The logo text exception does not exempt ordinary headings, navigation, buttons, promotional copy, or body text simply because they use a brand color.
Disabled controls are included in the inactive-component exception. Still, users must be able to understand why a control is unavailable and what must happen next. Low contrast should not be the only way status is communicated, and a more readable disabled treatment is often the better experience.
Common contrast testing mistakes
- Testing the design token instead of the rendered pair. Opacity, overlays, blending, and inherited colors can change the final result.
- Assuming a heading is large text. Confirm its computed size and weight.
- Rounding 4.48 or 4.499 up to 4.5. Threshold values must be met before rounding.
- Checking only the default state. Hover, focus, selected, error, visited, and placeholder styles can use different colors.
- Sampling one part of a background image. Test the least favorable area the text can occupy during normal use.
- Believing color-blind simulation replaces contrast testing. Simulations answer a different question; WCAG contrast uses relative luminance.
- Using color alone to communicate status. A passing ratio does not replace text, icons, patterns, or other non-color cues.
- Stopping after an automated pass. Typography, glare, motion, reflow, and real user needs still require review.
Pre-publish color contrast checklist
- Normal text is at least 4.5:1 for Level AA.
- Qualifying large text is at least 3:1 for Level AA.
- AAA targets are applied as 7:1 for normal text and 4.5:1 for large text.
- Computed results are compared without rounding up.
- Foreground and background are both explicitly controlled where needed.
- Text over gradients and images is tested in every expected position.
- Placeholder, hover, focus, selected, visited, and error states are checked.
- Important non-text component boundaries and graphics are checked separately.
- Thin fonts and borderline ratios receive additional visual review.
- Color is not the only method used to communicate meaning.
Use the right DOFIW color tool
Frequently asked questions
Is 4.5:1 always enough for text?
It is the Level AA minimum for normal text under WCAG 1.4.3. Larger margins may be more readable, especially with thin fonts, small sizes, glare, low-quality displays, or demanding reading conditions.
Does 3:1 pass for ordinary body text?
No. At Level AA, 3:1 applies to text that meets the large-scale definition. Normal text needs at least 4.5:1.
Can I round 4.48:1 to 4.5:1?
No. W3C explicitly treats contrast ratios as thresholds. A value below 4.5 does not meet the 4.5:1 requirement.
Does bold text automatically qualify as large?
No. Bold text must also be at least 14 point under the large-scale definition. Smaller bold text remains normal text for contrast testing.
Do logos need to pass text contrast?
Text that is part of a logo or brand name is exempt from the text contrast criterion. That exception does not cover other content merely because it uses brand colors.
How do I test text over a photograph?
Evaluate the text against the actual regions it can overlap during normal use, including responsive crops. A solid or sufficiently opaque backing layer is often more reliable than adjusting shadows.
Does passing contrast make a color palette accessible?
No. Contrast is one part of accessibility. Also review color-only meaning, focus visibility, component states, readability, motion, semantics, keyboard use, and assistive-technology behavior.
Official sources
This guide is educational information, not legal advice, certification, or a guarantee of WCAG conformance. Test the complete product with appropriate automated and human methods.