Color Contrast WCAG Guide: Ratios, Testing and Palette Fixes

Pale grey text on white looks elegant on a designer's monitor. On a phone in sunlight, or for someone with low vision, it can vanish. Color contrast is the difference in brightness between a foreground color and the color behind it, and the Web Content Accessibility Guidelines (WCAG) turn that difference into numbers you can test. If "color contrast WCAG" appeared in an audit report and you wondered which number applies to what, this guide is for you. For a broader routine, see the website accessibility audit.

It is written for site owners, designers and developers, and follows WCAG 2.2 and the W3C's Understanding documents. You will learn which success criteria set the 4.5:1, 3:1 and 7:1 ratios, what counts as large text, what the rules cover beyond text (form borders, icons, focus rings), how the ratio is calculated, and how to test and fix a palette. Passing these checks is only part of accessibility, and this guide does not say that any site is compliant or protected from legal claims.

Short answer: WCAG level AA asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (criterion 1.4.3), and 3:1 for interface components and meaningful graphics (1.4.11). Level AAA asks for 7:1, or 4.5:1 for large text (1.4.6). Ratios are never rounded.

Before you begin

Collect your colors from the stylesheet or design file: text, background, border, icon and link colors. CSS custom properties make this fast.
Pick a tool. Browser developer tools show a contrast ratio in the color picker, and web.dev lists standalone tools. Confirm the tool applies the WCAG formula.
Time and risk. A palette check takes an hour. Changing brand colors can touch many templates, so involve the brand owner and test on staging.
Know the limit. Automated tools measure text over solid colors well and text over photos or gradients poorly, so some checks stay manual.

Which WCAG success criteria cover color contrast?

Four success criteria matter most. The level tells you whether it is part of the common AA target (A and AA together) or a stricter AAA goal.

Criterion	Level	What it covers	Ratio needed
1.4.3 Contrast (Minimum)	AA	Text and images of text	4.5:1, or 3:1 for large text
1.4.6 Contrast (Enhanced)	AAA	Text and images of text	7:1, or 4.5:1 for large text
1.4.11 Non-text Contrast	AA	Interface components and graphics needed to understand content	3:1 against adjacent colors
1.4.1 Use of Color	A	Color as the only way to convey information	Color must not be the only cue; links in text are told apart by more than hue (one technique: 3:1 against surrounding text)

The W3C explains that each conformance level includes the levels below it, and that requiring Level AAA as a general policy for entire sites is not recommended because some content cannot satisfy every AAA criterion. AA is the usual target, with AAA contrast used where you can, such as body copy.

What counts as large text?

Large-scale text is 18 point or larger, or 14 point bold or larger, according to the Understanding document. At 1.333 pixels per point that is roughly 24 pixels, or 18.5 pixels bold. Smaller text follows the 4.5:1 rule.

What is exempt?

Under 1.4.3, no requirement applies to text in inactive components (a disabled button), purely decorative text, text no one can see, text in a picture with significant other visual content, and logotypes. The W3C adds a caution: a logo that works as a control should have a sufficient-contrast variant or an equivalent control, and low contrast chosen by the author rather than required by brand guidelines is not exempt. Under 1.4.11, disabled controls are also exempt, and supplemental hover effects need not reach 3:1 if they do not reduce the control's contrast.

How is the contrast ratio calculated?

The ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 that of the darker. Relative luminance weights red, green and blue by how bright the eye perceives them (0.2126 for red, 0.7152 for green, 0.0722 for blue, after converting each sRGB channel to linear light). The result runs from 1:1 (identical colors) to 21:1 (black on white).

Two practical points follow from the W3C text. Ratios are thresholds and must not be rounded, so 4.499:1 fails 4.5:1 and 2.999:1 fails 3:1. And you evaluate the colors defined in markup and style sheets, not the anti-aliased pixels you see, so thin fonts can look fainter than their numbers suggest; the Understanding document advises a stronger font or higher contrast for them.

What do real ratios look like?

These pairs were calculated with the WCAG formula. Check your own values in a tool, as small differences in hex codes matter.

Foreground	Background	Ratio	Normal text AA (4.5)	Large text AA (3)	Normal text AAA (7)
`#000000`	`#ffffff`	21.0:1	Pass	Pass	Pass
`#595959`	`#ffffff`	7.00:1	Pass	Pass	Pass (just)
`#767676`	`#ffffff`	4.54:1	Pass	Pass	Fail
`#777777`	`#ffffff`	4.48:1	Fail	Pass	Fail
`#949494`	`#ffffff`	3.03:1	Fail	Pass	Fail
`#999999`	`#ffffff`	2.85:1	Fail	Fail	Fail
`#ffffff`	`#007dff`	3.91:1	Fail	Pass	Fail
`#ffffff`	`#0b5cad`	6.67:1	Pass	Pass	Fail
`#ffffff`	`#4caf50`	2.78:1	Fail	Fail	Fail
`#ffffff`	`#f5a623`	2.03:1	Fail	Fail	Fail
`#1a1a1a`	`#f5a623`	8.59:1	Pass	Pass	Pass

Note that #777777 and #767676 look identical but sit on opposite sides of the line, and that white text on a bright blue or amber often fails while dark text on the amber passes comfortably.

Step-by-step instructions

Step 1: List every text and background pair

Make a sheet with element, foreground, background and location. Include body text, links, buttons, labels, helper text, placeholder text, footers, banners and error messages. The Understanding document says placeholder text and text shown on hover or keyboard focus are covered by 1.4.3 too. Text rendered inside images is covered as well, and real text is preferred because it scales and recolors better; images that stay need good alt text.

You have succeeded when no text style is missing from the list, including text on tinted panels and colored sections.

Step 2: Measure each text pair against the right threshold

Enter each pair into your checker and compare with 4.5:1, or 3:1 if the text is large. For pairs that fail, record the ratio, not just "fail", so you know how far to move. If a background is a gradient or image, measure the worst spot behind the text. The Understanding document treats a background image that does not give sufficient contrast with the text as a failure.

You have succeeded when every pair has a ratio and a pass or fail against the threshold.

Step 3: Check non-text elements at 3:1

Under 1.4.11, the parts of a control needed to identify it must reach 3:1 against adjacent colors, and so must graphics needed to understand content. Check input borders, checkbox outlines, toggle tracks, icon-only buttons, chart lines and selected states. The W3C's examples: a text input with a #767676 border passes on white, while #AAAAAA on white fails because the border is what identifies the field. A button with sufficiently contrasting text does not also need a border.

Watch for tinted backgrounds. #767676 has 4.54:1 on white but only 4.13:1 on #f4f4f4. That is fine as a 3:1 border and too low as 4.5:1 text.

For focus rings, the same document says a custom focus indicator must contrast with adjacent colors, while the browser's default focus style, if you have not changed it, is exempt from the contrast requirement but must be visible. Our keyboard navigation guide goes further.

You have succeeded when every control and meaningful icon passes 3:1 or is identified by something else that does.

Step 4: Fix failing pairs by adjusting lightness, not hue

The cleanest fix keeps the brand color's hue and moves lightness. Darken text on light backgrounds or lighten it on dark ones until the ratio passes. Keep the original brand color for large shapes and decoration, and define a darker companion for text and small details. For white-on-color buttons, darken the button; for bright backgrounds like amber, switch to dark text.

:root {
  --text:        #1a1a1a;  /* 17.40:1 on white */
  --text-muted:  #595959;  /*  7.00:1 on white */
  --brand:       #0b5cad;  /*  6.67:1 on white; also white text on it */
  --border:      #767676;  /*  4.54:1 on white; passes 3:1 for UI borders */
  --error:       #b3261e;  /*  6.54:1 on white */
}

button.primary { background: var(--brand); color: #fff; }
input          { border: 1px solid var(--border); }

Write the ratio in a comment so the next editor knows the limit, and recheck a changed token wherever it is used.

You have succeeded when each failing pair passes and no passing pair was made worse.

Step 5: Do not rely on color alone

Good contrast is not the same as color independence. Under 1.4.1, color must not be the only visual means of conveying information. The W3C lists identifying required or error fields by color alone as a failure and suggests pairing color with a text cue or an icon. Links inside paragraphs should differ from surrounding text by more than hue (the documented technique is 3:1 between link and surrounding text), and link text must still meet 1.4.3 against the background. An underline is the simplest cue. Web.dev suggests reviewing a design in grayscale to spot color-only meaning. See accessible forms for error messages.

You have succeeded when a grayscale view of the page still shows which links, errors and states are which.

Step 6: Handle dark mode and user preferences

Test dark themes as a separate palette. For example, #e6e6e6 on #121212 is 15.01:1 and #a0a0a0 on the same background is 7.16:1, but a dimmer grey would fall below the thresholds, so measure every muted shade. MDN documents the prefers-contrast media feature, which lets users signal a request for more or less contrast through their operating system, and Baseline marks it as widely available. You may offer stronger colors for more, but the default palette still has to meet the criteria.

You have succeeded when both themes pass their thresholds.

Step 7: Re-test automatically, then by eye

Run an automated audit. Crawvix's accessibility checks include a text-contrast check based on Lighthouse's color-contrast audit; its own pass message says it covers only the text it can measure. Then inspect what automation misses: text over photos, text in images, hover and focus states, charts and pages behind a login. The WCAG 2.2 checklist puts contrast beside the other AA items.

You have succeeded when automated results are clean and a manual pass finds no unreadable text.

Final verification checklist

Every text and background pair has a measured ratio on file.
Normal text reaches 4.5:1 and large text 3:1, or you have chosen AAA values where you can.
Input borders, icons and chart elements reach 3:1 or are identified another way.
Custom focus indicators contrast with their surroundings.
Placeholder, hover, focus and error text were measured, not only default states.
Links in text differ by more than color.
Dark mode and any tinted backgrounds were tested separately.
You understand that passing color contrast wcag checks is not proof of overall conformance.

Common mistakes to avoid

Rounding up. 4.48:1 is not 4.5:1. Use the exact number.
Testing the default state only. Hover, focus, visited and error states count.
White text on a bright brand color. Darken the color or use dark text.
Text over photos with no overlay. Put a solid or sufficiently dark scrim behind it.
Assuming the brand exemption is wide. Only logotypes are exempt, and low contrast chosen by the author does not qualify.

Frequently asked questions

What is the minimum color contrast ratio for WCAG AA?

4.5:1 for normal text and 3:1 for large text under success criterion 1.4.3. Interface components and meaningful graphics need 3:1 under 1.4.11.

Where does the 7:1 ratio come from?

From success criterion 1.4.6, Contrast (Enhanced), at Level AAA. It asks for 7:1 for normal text and 4.5:1 for large text.

Do logos and disabled buttons need to pass?

Logotypes and inactive components are exempt from the text contrast requirement. A logo that acts as a control, such as a link home, should still have a sufficient-contrast variant or an equivalent control.

Does passing contrast checks make my site accessible or compliant?

No (see also How do I check if my website is accessible?). Contrast is one group of criteria among many, and conformance requires meeting every criterion at the chosen level for a page. Nothing in this guide is legal advice or a statement of compliance.

Do I need to check contrast in dark mode?

Yes. Treat dark mode as its own palette and measure it separately.

Does color contrast affect SEO?

This guide makes no claim about rankings. Contrast is an accessibility matter: the reason to fix it is that people can read your pages.

Official references

Next step: Try the free website sample to see how your own site does on a few of these checks. This guide provides technical information, not a guarantee of rankings, traffic or index inclusion.