WCAG Contrast Checker
Check the contrast ratio of a text/background pair against WCAG AA and AAA — with live preview at normal and large text sizes.
792 views
The quick brown fox jumps over the lazy dog
Large text sample 24px
What the Ratio Means
Contrast ratio compares the relative luminance of two colors, from 1:1 (identical) to 21:1 (black on white). WCAG requires 4.5:1 for normal text (AA) and 3:1 for large text (≥24 px, or ≥18.7 px bold); the stricter AAA level asks 7:1 and 4.5:1. UI components and graphics need 3:1 against adjacent colors.
The math linearizes each sRGB channel, weights them (L = 0.2126R + 0.7152G + 0.0722B) and computes (L₁+0.05)/(L₂+0.05). Intuition often fails here — mid-gray #777 on white reads fine to many eyes yet scores 4.48:1, just short of AA. Low-vision users, sunlight and cheap panels are what the margins are for.
Frequently Asked Questions
Does swapping text and background change the ratio?
No — the formula always puts the lighter color on top, so the ratio is symmetric. Legibility can still differ subjectively (light-on-dark halation), but the WCAG score is identical.
What counts as large text?
24 px (18 pt) regular or about 18.7 px (14 pt) bold and larger. Large text only needs 3:1 at AA because bigger glyphs stay readable at lower contrast.
My brand color fails — what now?
Keep it for decoration and shift the text usage darker or lighter until it passes; a tint/shade scale helps. Placeholder text and disabled states are exempt from the requirement, but keep them reasonable.
Similar Tools
Report a Problem
WCAG Contrast Checker