Color Contrast Checker (WCAG)
Check text/background contrast against WCAG AA & AAA.
Check the colour contrast between text and its background and get the exact WCAG 2.1 contrast ratio with instant AA and AAA pass-fail verdicts for normal and large text, plus a live preview. Essential for accessible, readable web design. Runs fully in your browser — nothing is uploaded.
How to use Color Contrast Checker (WCAG)
Enter text color
Type or paste your text color as a hex code, or use the picker, to set the foreground color you want to test for accessibility.
Set background color
Enter the background color the same way so the free online color contrast checker can compare the two colors instantly in your browser.
Read the contrast ratio
See the exact WCAG contrast ratio between your text and background, calculated live using the official sRGB relative luminance formula.
Check AA and AAA
Review the Pass or Fail verdicts for WCAG AA and AAA at both normal and large text sizes to confirm your colors meet accessibility standards.
Preview live text
Check the live preview of large and normal body text in your chosen colors to judge real-world readability before you ship the design.
Swap and refine
Use Swap colors to flip foreground and background, then tweak either hex value until the contrast ratio comfortably passes WCAG AA.
Frequently asked questions
What is a good WCAG contrast ratio?
Aim for at least 4.5:1 for normal body text and 3:1 for large text to meet WCAG level AA. For the stricter AAA level, target 7:1 and 4.5:1 respectively.
What counts as 'large' text?
WCAG defines large text as at least 24px (18pt) for regular weight, or 18.66px (14pt) when bold. Large text is allowed a lower contrast ratio because it's easier to read.
How is the contrast ratio calculated?
It's the ratio of the relative luminance of the lighter colour to the darker one, (L1 + 0.05) / (L2 + 0.05), using the official WCAG sRGB luminance formula. Ratios run from 1:1 (identical) to 21:1 (black on white).
How do I check colour contrast for accessibility?
Enter your text colour and background colour as hex values and this WCAG contrast checker shows the exact contrast ratio plus AA and AAA pass/fail verdicts for normal and large text, with a live preview. Use it to make sure your colour combinations meet web accessibility standards.
What contrast ratio do I need to pass WCAG AA?
To pass WCAG 2.1 level AA you need a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. For the stricter AAA level, aim for 7:1 and 4.5:1 respectively — this contrast checker marks each as Pass or Fail automatically.
Is my data uploaded anywhere?
No. The contrast check runs entirely in your browser — nothing is sent to or stored on a server.
Related tools — Color tools
- Color Picker & Converter — Pick a colour and convert HEX, RGB, HSL, HSV & CMYK.
- Color Palette Generator — Generate harmonious colour palettes from any base colour.
- CSS Gradient Generator — Build linear, radial & conic CSS gradients and copy the code.
- Material Design Colors — The full Material Design palette with hex & RGB.
- Tailwind CSS Colors — The full default Tailwind palette with hex & RGB.
- Tailwind Color Generator — Turn one base colour into a full 50–950 Tailwind shade scale.
- All HTML Color Codes — Every CSS named colour with its HEX, RGB & HSL values.