What is a color contrast ratio?

Contrast ratio measures the difference in perceived brightness between two colors, expressed from 1:1 (identical) to 21:1 (black on white). WCAG uses it to ensure text and interface elements are legible for people with low vision.

What is the difference between WCAG AA and AAA?

AA is the standard most organizations target and the level referenced by most accessibility laws: 4.5:1 for normal text and 3:1 for large text. AAA is stricter — 7:1 for normal text and 4.5:1 for large text — and is reserved for the highest level of conformance.

What counts as "large" text?

WCAG defines large text as at least 18pt (24px), or 14pt (about 18.66px) when bold. Large text qualifies for the lower 3:1 (AA) and 4.5:1 (AAA) thresholds because larger letterforms remain readable at lower contrast.

Do icons and buttons need to meet contrast requirements?

Yes. WCAG 2.1 success criterion 1.4.11 requires a 3:1 contrast ratio for the visual boundaries of user-interface components (like buttons and form fields) and meaningful graphics against their background.

Free Accessibility Tool

Color Contrast Checker

Test any foreground and background color against WCAG 2.1 AA and AAA contrast requirements. Pick colors, paste hex, RGB, or HSL, preview live text, and get a suggested passing color when a pair falls short.

Foreground

rgb(47, 76, 30) · hsl(98, 43%, 21%)

Background

rgb(245, 240, 235) · hsl(30, 33%, 94%)

8.53: 1contrast ratio

AA · Normal textPass · 4.5:1
AA · Large textPass · 3:1
AAA · Normal textPass · 7:1
AAA · Large textPass · 4.5:1
UI componentsPass · 3:1

The quick brown fox

This is how body copy looks with your chosen colors. Legible contrast keeps content readable for everyone, including people with low vision.

Sample button

Brand palette matrix

Every color as foreground (rows) against every color as background (columns). A check means the pair clears WCAG AA for normal text (4.5:1). Add your own colors to test your brand.

Contrast pass/fail matrix: foreground colors in rows, background colors in columns, AA normal text.
FG \ BG	surface-0	surface-100	surface-700	surface-950	brand-500	brand-700	brand-800	accent-500	accent-700
surface-0	surface-0 on surface-0: 1.00 to 1, fail	surface-0 on surface-100: 1.11 to 1, fail	surface-0 on surface-700: 7.53 to 1, pass	surface-0 on surface-950: 16.66 to 1, pass	surface-0 on brand-500: 3.48 to 1, fail	surface-0 on brand-700: 7.33 to 1, pass	surface-0 on brand-800: 9.44 to 1, pass	surface-0 on accent-500: 2.79 to 1, fail	surface-0 on accent-700: 5.73 to 1, pass
surface-100	surface-100 on surface-0: 1.11 to 1, fail	surface-100 on surface-100: 1.00 to 1, fail	surface-100 on surface-700: 6.81 to 1, pass	surface-100 on surface-950: 15.06 to 1, pass	surface-100 on brand-500: 3.14 to 1, fail	surface-100 on brand-700: 6.63 to 1, pass	surface-100 on brand-800: 8.53 to 1, pass	surface-100 on accent-500: 2.53 to 1, fail	surface-100 on accent-700: 5.18 to 1, pass
surface-700	surface-700 on surface-0: 7.53 to 1, pass	surface-700 on surface-100: 6.81 to 1, pass	surface-700 on surface-700: 1.00 to 1, fail	surface-700 on surface-950: 2.21 to 1, fail	surface-700 on brand-500: 2.17 to 1, fail	surface-700 on brand-700: 1.03 to 1, fail	surface-700 on brand-800: 1.25 to 1, fail	surface-700 on accent-500: 2.70 to 1, fail	surface-700 on accent-700: 1.32 to 1, fail
surface-950	surface-950 on surface-0: 16.66 to 1, pass	surface-950 on surface-100: 15.06 to 1, pass	surface-950 on surface-700: 2.21 to 1, fail	surface-950 on surface-950: 1.00 to 1, fail	surface-950 on brand-500: 4.79 to 1, pass	surface-950 on brand-700: 2.27 to 1, fail	surface-950 on brand-800: 1.77 to 1, fail	surface-950 on accent-500: 5.96 to 1, pass	surface-950 on accent-700: 2.91 to 1, fail
brand-500	brand-500 on surface-0: 3.48 to 1, fail	brand-500 on surface-100: 3.14 to 1, fail	brand-500 on surface-700: 2.17 to 1, fail	brand-500 on surface-950: 4.79 to 1, pass	brand-500 on brand-500: 1.00 to 1, fail	brand-500 on brand-700: 2.11 to 1, fail	brand-500 on brand-800: 2.71 to 1, fail	brand-500 on accent-500: 1.24 to 1, fail	brand-500 on accent-700: 1.65 to 1, fail
brand-700	brand-700 on surface-0: 7.33 to 1, pass	brand-700 on surface-100: 6.63 to 1, pass	brand-700 on surface-700: 1.03 to 1, fail	brand-700 on surface-950: 2.27 to 1, fail	brand-700 on brand-500: 2.11 to 1, fail	brand-700 on brand-700: 1.00 to 1, fail	brand-700 on brand-800: 1.29 to 1, fail	brand-700 on accent-500: 2.62 to 1, fail	brand-700 on accent-700: 1.28 to 1, fail
brand-800	brand-800 on surface-0: 9.44 to 1, pass	brand-800 on surface-100: 8.53 to 1, pass	brand-800 on surface-700: 1.25 to 1, fail	brand-800 on surface-950: 1.77 to 1, fail	brand-800 on brand-500: 2.71 to 1, fail	brand-800 on brand-700: 1.29 to 1, fail	brand-800 on brand-800: 1.00 to 1, fail	brand-800 on accent-500: 3.38 to 1, fail	brand-800 on accent-700: 1.65 to 1, fail
accent-500	accent-500 on surface-0: 2.79 to 1, fail	accent-500 on surface-100: 2.53 to 1, fail	accent-500 on surface-700: 2.70 to 1, fail	accent-500 on surface-950: 5.96 to 1, pass	accent-500 on brand-500: 1.24 to 1, fail	accent-500 on brand-700: 2.62 to 1, fail	accent-500 on brand-800: 3.38 to 1, fail	accent-500 on accent-500: 1.00 to 1, fail	accent-500 on accent-700: 2.05 to 1, fail
accent-700	accent-700 on surface-0: 5.73 to 1, pass	accent-700 on surface-100: 5.18 to 1, pass	accent-700 on surface-700: 1.32 to 1, fail	accent-700 on surface-950: 2.91 to 1, fail	accent-700 on brand-500: 1.65 to 1, fail	accent-700 on brand-700: 1.28 to 1, fail	accent-700 on brand-800: 1.65 to 1, fail	accent-700 on accent-500: 2.05 to 1, fail	accent-700 on accent-700: 1.00 to 1, fail

Contrast, explained

What is a color contrast ratio?: Contrast ratio measures the difference in perceived brightness between two colors, expressed from 1:1 (identical) to 21:1 (black on white). WCAG uses it to ensure text and interface elements are legible for people with low vision.
What is the difference between WCAG AA and AAA?: AA is the standard most organizations target and the level referenced by most accessibility laws: 4.5:1 for normal text and 3:1 for large text. AAA is stricter — 7:1 for normal text and 4.5:1 for large text — and is reserved for the highest level of conformance.
What counts as "large" text?: WCAG defines large text as at least 18pt (24px), or 14pt (about 18.66px) when bold. Large text qualifies for the lower 3:1 (AA) and 4.5:1 (AAA) thresholds because larger letterforms remain readable at lower contrast.
Do icons and buttons need to meet contrast requirements?: Yes. WCAG 2.1 success criterion 1.4.11 requires a 3:1 contrast ratio for the visual boundaries of user-interface components (like buttons and form fields) and meaningful graphics against their background.

Want your whole site checked?

Contrast is one piece of accessibility. We audit your full site against WCAG 2.1 AA — color, keyboard navigation, screen-reader support, and more — and give you a prioritized fix list.

Request a free audit