WCAG Color Contrast: How to Check AA & AAA Compliance

Text samples on colored backgrounds labeled with WCAG contrast ratios and AA and AAA pass or fail marks

Last reviewed: October 1, 2026

Short answer: WCAG measures color contrast as a ratio from 1:1 (no contrast) to 21:1 (black on white). To meet Level AA, normal text needs at least 4.5:1 against its background and large text needs at least 3:1 (SC 1.4.3). User interface components and meaningful graphics need at least 3:1 (SC 1.4.11). Level AAA raises text to 7:1 and large text to 4.5:1 (SC 1.4.6).

To check a color pair, enter the foreground and background colors in a contrast checker or use the color picker in your browser's DevTools. Do not round: 4.49:1 fails AA. Automated tools miss text over images, gradients and hover or focus states, so review those by hand.

This guide explains the exact WCAG contrast requirements, how the ratio is calculated, how to test it and how to fix failures without wrecking a brand palette.

The fastest way to test one pair of colors is a free, browser-based color contrast checker: enter two colors and compare the ratio with the thresholds below.

In this guide

Why contrast matters
What WCAG is: versions and levels
The exact contrast requirements
How the contrast ratio is calculated
Sample color pairs: pass or fail
How to check contrast
Fixing contrast failures
Color alone, links and focus indicators
Building an accessible palette
What the ratio does not cover, and APCA
Legal context in brief
Common mistakes
Checklist
FAQ
Bottom line
Sources

Why contrast matters

Text that is too close in lightness to its background is hard or impossible to read for many people. The W3C says the intent of the minimum contrast rule is that text "can be read by people with moderately low vision or impaired contrast perception" without contrast-enhancing assistive technology.

The W3C's Web Accessibility Initiative (WAI) names several groups who depend on good contrast:

People with low vision. The 4.5:1 figure was chosen to compensate for the contrast loss typical of roughly 20/40 vision.
People with color vision deficiency. The ratio is based on luminance (lightness), not hue, so a pair that passes stays readable when hues are hard to tell apart.
Older people. WAI notes that low contrast sensitivity is common in older people.
Everyone in poor conditions. WAI points to sunlight and glare on a screen as situations where good contrast keeps content usable.

What WCAG is: versions and levels

The Web Content Accessibility Guidelines (WCAG) are the W3C's standard for accessible web content. They are organized into testable statements called success criteria (SC), and each one has a conformance level.

Version	Published	Contrast-related content
WCAG 2.0	December 11, 2008	SC 1.4.1 Use of Color, SC 1.4.3 Contrast (Minimum), SC 1.4.6 Contrast (Enhanced), SC 2.4.7 Focus Visible
WCAG 2.1	June 5, 2018	Adds SC 1.4.11 Non-text Contrast
WCAG 2.2	October 5, 2023	Adds SC 2.4.11 Focus Not Obscured (Minimum) and SC 2.4.13 Focus Appearance, among others

The versions are backward compatible. In the W3C's words, content that conforms to WCAG 2.2 also conforms to WCAG 2.1 and WCAG 2.0.

There are three conformance levels:

Level A is the minimum.
Level AA requires all Level A and Level AA criteria. This is the level most policies and laws point to.
Level AAA requires all three sets. The W3C does not recommend requiring AAA as a general policy for entire sites, because some content cannot satisfy every AAA criterion.

The exact contrast requirements

Three success criteria set numeric contrast thresholds. Two cover text and one covers non-text elements.

Success criterion	Level	Applies to	Minimum ratio
1.4.3 Contrast (Minimum)	AA	Text and images of text	4.5:1
1.4.3 Contrast (Minimum)	AA	Large-scale text	3:1
1.4.6 Contrast (Enhanced)	AAA	Text and images of text	7:1
1.4.6 Contrast (Enhanced)	AAA	Large-scale text	4.5:1
1.4.11 Non-text Contrast	AA	User interface components and graphical objects, against adjacent colors	3:1

What counts as large text

WCAG defines large-scale text as at least 18 point, or at least 14 point if bold. The W3C notes that 18pt and 14pt are equivalent to approximately 24 CSS pixels and 18.5 CSS pixels (1pt is 1.333px, so 14pt is 18.67px exactly).

Exceptions

SC 1.4.3 and SC 1.4.6 have no contrast requirement for:

Incidental text: text that is part of an inactive user interface component, that is pure decoration, that is not visible to anyone, or that is part of a picture containing significant other visual content.
Logotypes: text that is part of a logo or brand name.

The same idea applies to SC 1.4.11: components that are not available for interaction, such as a disabled button, are not required to meet the ratio.

Two things are not exempt, according to the W3C's Understanding document: placeholder text in form fields, and text shown on hover or keyboard focus. Both must meet the text thresholds.

What SC 1.4.11 covers

Non-text Contrast requires 3:1 for the visual information needed to identify a user interface component and its states, and for the parts of graphics needed to understand the content. Typical cases are an input border that is the only sign of the field, a checkbox outline and check mark, a custom focus ring, icons that carry meaning, and lines or segments in a chart.

How the contrast ratio is calculated

The contrast ratio compares the relative luminance of two colors: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color and L2 is the darker. Relative luminance runs from 0 (black) to 1 (white), so the ratio runs from 1:1 to 21:1.

The steps for an sRGB color are:

Divide each 8-bit channel (R, G, B) by 255 to get a value from 0 to 1.
Linearize each channel: if the value is 0.04045 or less, divide it by 12.92; otherwise compute ((value + 0.055) / 1.055) ^ 2.4.
Combine: L = 0.2126 * R + 0.7152 * G + 0.0722 * B.
Apply the ratio formula with the lighter color on top.

Green carries most of the weight (0.7152) and blue very little (0.0722).

Worked example 1: #767676 on white

#767676 -> R = G = B = 118
118 / 255                      = 0.462745
((0.462745 + 0.055) / 1.055) ^ 2.4 = 0.181164   (each channel)
L = (0.2126 + 0.7152 + 0.0722) * 0.181164 = 0.181164

#FFFFFF -> L = 1

Ratio = (1 + 0.05) / (0.181164 + 0.05)
      = 1.05 / 0.231164
      = 4.5422

4.54:1 passes AA for normal text. It fails AAA for normal text (7:1) and passes AAA for large text (4.5:1). #767676 is the lightest pure gray that passes AA on white: the next step, #777777, comes out at 4.4781 and fails.

Worked example 2: #AAAAAA on white

#AAAAAA -> R = G = B = 170
170 / 255                      = 0.666667
((0.666667 + 0.055) / 1.055) ^ 2.4 = 0.401978
L = 0.401978

Ratio = 1.05 / (0.401978 + 0.05)
      = 1.05 / 0.451978
      = 2.3231

2.32:1 fails every text threshold, including 3:1 for large text.

Do not round up

The W3C is explicit: "The computed values should not be rounded (e.g., 4.499:1 would not meet the 4.5:1 threshold)." The same wording appears for the 3:1 threshold. A tool that shows two decimals can mislead here: #959595 on white is 2.9953, which displays as 3.00 but does not meet 3:1.

Sample color pairs: pass or fail

The ratios below were computed with the WCAG formula and compared with the thresholds before any rounding. "Normal" means text below the large-text size.

Text	Background	Ratio	AA normal (4.5)	AA large (3)	AAA normal (7)	AAA large (4.5)
#000000	#FFFFFF	21.00	Pass	Pass	Pass	Pass
#595959	#FFFFFF	7.00 (7.0047)	Pass	Pass	Pass	Pass
#767676	#FFFFFF	4.54	Pass	Pass	Fail	Pass
#FFFFFF	#1A73E8	4.51 (4.5050)	Pass	Pass	Fail	Pass
#777777	#FFFFFF	4.48	Fail	Pass	Fail	Fail
#FF0000	#FFFFFF	4.00 (3.9985)	Fail	Pass	Fail	Fail
#959595	#FFFFFF	3.00 (2.9953)	Fail	Fail	Fail	Fail
#AAAAAA	#FFFFFF	2.32	Fail	Fail	Fail	Fail
#FFFFFF	#FFC107	1.63	Fail	Fail	Fail	Fail
#000000	#FFC107	12.88	Pass	Pass	Pass	Pass
#9E9E9E	#121212	6.99 (6.9924)	Pass	Pass	Fail	Pass

How to check contrast

Use a checker for individual color pairs, DevTools for elements on a real page, and automated scans for coverage. Then review by hand what the tools cannot see.

Online checker

Enter the text color and background color as hex, RGB or HSL values and read the ratio. Test the real colors from your CSS, not colors sampled from a screenshot, because anti-aliasing blends the edges of letters.

Chrome DevTools

According to the Chrome DevTools documentation, Chrome offers several entry points:

The color picker in the Styles pane shows the contrast ratio for a text color, with lines on the color area marking the AA and AAA boundaries, and can suggest a color that meets them.
The Inspect mode tooltip shows contrast information when you hover an element.
The CSS Overview panel lists the low-contrast text it finds across the page.

Firefox DevTools

Firefox's Accessibility Inspector has a "Check for issues" menu with a Contrast option that lists elements with contrast problems. Its element information bar shows the ratio with an AA or AAA label or a warning, and for text over a gradient it shows a range of values instead of one number.

Automated testing and its limits

Browser extensions, command-line scanners and CI checks compute the ratio for text whose colors can be read from the page. That catches most plain text on solid backgrounds. Plan manual review for the rest:

Text over images, video or gradients. The background varies under the letters. Check the worst spot, meaning the area where text and background are closest.
Hover, focus, active and visited states. A scanner usually tests only the default state.
Placeholder text. It is often lighter than the field's value and must still meet 4.5:1.
Non-text contrast. Icons, input borders, focus rings and chart colors generally need a human decision about which adjacent colors matter.

Fixing contrast failures

You fix a failure by increasing the luminance difference: make the darker color darker, the lighter color lighter, or both. Changing only the hue or saturation rarely helps.

Darken the text or lighten the background

For gray text on white, #777777 fails at 4.48 and #767676 passes at 4.54. Leave a margin where you can: #595959 reaches AAA at 7.00.

Adjust lightness and keep the hue

To stay on brand, change lightness and leave hue alone. In HSL, lower the L value for text on a light background:

/* Same hue and saturation, darker lightness */
.note      { color: hsl(214 82% 51%); }  /* #1C74E9, 4.45:1 on white: fails AA */
.note-dark { color: hsl(214 82% 38%); }  /* #1156B0, 7.04:1 on white: passes AAA */

HSL lightness is not perceptual: a yellow and a blue with the same L value have very different luminance. OKLCH is a better working space, because its L component represents perceived lightness, so stepping L while holding chroma and hue gives more predictable results.

Whichever space you adjust in, the pass or fail decision still uses the WCAG formula. Convert the result to sRGB and recheck the ratio.

Text over images

Put a layer between the image and the text so the background under the letters is predictable: a semi-transparent dark overlay across the image, a solid or translucent panel behind the text, or a gradient scrim behind a caption. Then measure the text against the lightest area that remains under it (or the darkest, for dark text).

Dark mode

The thresholds are the same in dark themes. A typical near-miss is muted gray text: in the table above, #9E9E9E on #121212 is 6.99, fine for AA but just short of AAA. Define and test the dark palette as its own set of pairs.

Color alone, links and focus indicators

Contrast is necessary but not sufficient: WCAG also requires that color is not the only signal, and that keyboard focus is visible.

Do not rely on color alone (SC 1.4.1, Level A)

"Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element." Mark required fields with text or an icon as well as red.

Links within text

If links inside a paragraph are distinguished only by color, the W3C's technique G183 calls for at least 3:1 contrast between the link text and the surrounding text, and it still encourages an additional indicator such as an underline. Both colors must still meet 4.5:1 against the background. That combination is hard to hit: the default link blue #0000EE against #333333 body text is only 1.34:1. Underlining links avoids the problem entirely.

Focus indicators

Success criterion	Level	What it requires
2.4.7 Focus Visible	AA	A keyboard-operable interface has a mode of operation where the keyboard focus indicator is visible. It sets no size or contrast figure itself.
1.4.11 Non-text Contrast	AA	An author-styled focus indicator needs 3:1 against adjacent colors.
2.4.11 Focus Not Obscured (Minimum), new in 2.2	AA	The focused component is not entirely hidden by author-created content such as sticky headers. This is about covering, not color.
2.4.13 Focus Appearance, new in 2.2	AAA	The focus indicator is at least as large as a 2 CSS pixel thick perimeter of the unfocused component, and has at least 3:1 contrast between the same pixels in the focused and unfocused states.

A 2px solid outline with a small outline-offset, in a color that reaches 3:1 on every background it can appear on, is a practical pattern. Never remove outlines without providing a replacement.

Building an accessible palette

The reliable way to stay compliant is to decide the allowed color pairs once, in design tokens, instead of checking each screen afterward.

Build a lightness scale per hue. For example, steps from 50 (lightest) to 900 (darkest), generated by stepping lightness in OKLCH.
Compute the ratio for every step against your surfaces (white, off-white, dark surface) and record which steps reach 3:1, 4.5:1 and 7:1.
Name tokens by role, not by color.
Define pairs. Each background token gets an "on" token that is guaranteed to pass on it.

:root {
  --surface:         #ffffff;
  --text:            #333333;  /* 12.63:1 on --surface */
  --text-muted:      #595959;  /* 7.00:1 on --surface */
  --border-control:  #767676;  /* 4.54:1 on --surface, above 3:1 for UI */
  --primary:         #1a73e8;
  --on-primary:      #ffffff;  /* 4.51:1 on --primary: AA, little margin */
}

What the ratio does not cover, and APCA

The WCAG 2 ratio is a simple luminance comparison with one size threshold. It does not measure everything that affects legibility.

Font weight and thin fonts. Apart from the large-text rule, the formula ignores stroke thickness. The W3C warns that, because of anti-aliasing, thin or unusual fonts may be rendered much fainter than the specified color, and suggests a font with stronger lines or a ratio above the minimum.
Size below the threshold. 10px text and 17px text have the same 4.5:1 requirement.

A note on APCA. The Advanced Perceptual Contrast Algorithm (APCA) is a different contrast method that takes font size and weight into account. The first public working draft of WCAG 3 in January 2021 referenced APCA in its visual contrast guideline. WCAG 3 is still, in the W3C's words, "an incomplete draft that will change", and the working draft dated September 10, 2026 states: "The contrast algorithm used in WCAG 3 is yet to be determined." APCA is therefore a candidate that has been explored, not a W3C requirement. Conformance today is measured with the WCAG 2 ratio.

Legal context in brief

Many accessibility laws refer to WCAG, usually at Level AA, so the contrast thresholds above often have legal weight. This section is general information, not legal advice; check the rules that apply to your organization and country.

European Union. The European Accessibility Act (Directive (EU) 2019/882) has applied since June 28, 2025. The European Commission lists e-commerce, banking services, e-books and other products and services within its scope.
EN 301 549. This is the European harmonized standard for ICT accessibility used with the EU Web Accessibility Directive for public sector websites and apps. The Commission states that version 3.2.1 draws heavily on WCAG 2.1 and includes additional requirements beyond it.
United States, Section 508. The Revised 508 Standards for federal agencies require electronic content to conform to the Level A and Level AA success criteria of WCAG 2.0. The update took effect on January 18, 2018.
United States, ADA Title II. The Department of Justice rule for state and local governments names WCAG 2.1 Level AA as the technical standard for web content and mobile apps. ADA.gov currently lists compliance dates of April 26, 2027 for entities serving 50,000 or more people and April 26, 2028 for smaller entities and special districts.

Common mistakes

Mistake	Why it is a problem	Fix
Rounding 4.48 up to 4.5	The W3C says computed values should not be rounded	Compare the unrounded value; add a margin
Treating 16px bold as large text	Large means 18pt (24px), or 14pt (about 18.5px) bold	Apply 4.5:1 unless the text meets the size rule
Light gray placeholder text	Placeholders are not exempt	Use a color with at least 4.5:1, plus a visible label
White text on yellow or amber buttons	#FFFFFF on #FFC107 is 1.63:1	Use dark text (12.88:1 with black)
Links marked only by color	Risks failing SC 1.4.1 unless link and surrounding text differ by at least 3:1	Underline links

Checklist

Body text and placeholder text reach at least 4.5:1.
Large text (24px, or about 18.5px bold, and up) reaches at least 3:1.
Input borders, icons, focus rings and chart elements reach at least 3:1 against adjacent colors.
Hover, focus, active, visited, error and selected states are tested.
Text over images, gradients and video is checked at the worst spot.
Color is never the only signal; links in text are underlined or otherwise marked.

FAQ

What contrast ratio do I need for WCAG AA?

At least 4.5:1 for normal text and 3:1 for large text (SC 1.4.3), and 3:1 for user interface components and meaningful graphics (SC 1.4.11).

What is the lightest gray text that passes AA on white?

#767676, at 4.54:1. #777777 is 4.48:1 and fails. For AAA on white, #595959 gives 7.00:1.

Is 4.49:1 close enough?

No. The W3C states that computed values should not be rounded, so 4.499:1 does not meet 4.5:1.

Does placeholder text have to meet contrast requirements?

Yes. The W3C's Understanding document for SC 1.4.3 says the requirement applies to placeholder text, and to text shown on hover or focus.

Do disabled buttons need to pass?

No. Text in inactive user interface components has no contrast requirement, and inactive components are exempt from SC 1.4.11. Keeping them reasonably legible is still good practice.

How big is "large text" in pixels?

18pt is 24px, and 14pt bold is about 18.5px (18.67px exactly) bold, measured at the size the page delivers.

How do I check contrast in Chrome or Firefox?

In Chrome, click the color swatch next to color in the Styles pane to see the ratio with AA and AAA indicators. In Firefox, open the Accessibility Inspector and choose Check for issues, then Contrast.

Is APCA required?

No. APCA has been explored in WCAG 3 drafts, but WCAG 3 is an incomplete draft and its contrast algorithm has not been decided. WCAG 2 conformance uses the ratio described in this guide.

Bottom line

Meeting WCAG contrast comes down to three numbers: 4.5:1 for text, 3:1 for large text and for interface elements, and 7:1 if you aim for AAA. Compute the ratio from the real CSS colors, do not round up, and check the cases that automated tools miss: states, placeholders, text over images and dark themes. A color contrast checker and your browser's DevTools cover day-to-day testing, and a token-based palette keeps the results from regressing. You can find related utilities in our free developer tools.

table of contents feature [open]