Live text preview
See exactly how your text looks on the background at multiple font sizes before publishing.
Color Tools
WCAG Contrast Checker
Test color contrast ratios against WCAG 2.1 accessibility standards. Ensure text and background color combinations meet AA and AAA compliance for normal and large text.
All 4 WCAG criteria
Checks AA normal, AA large, AAA normal, and AAA large text criteria simultaneously.
Exact contrast ratio
Shows the precise contrast ratio (e.g. 7.24:1) based on the WCAG relative luminance formula.
The quick brown fox jumps over the lazy dog
Normal body text at 16px. This sentence demonstrates readability at standard sizes.
Smaller text at 14px — more challenging to read at lower contrast.
Contrast Ratio
13.98:1
Passes
4/4
AA NormalPASS
Normal text (< 18pt)
Needs ≥ 4.5:1
AA LargePASS
Large text (≥ 18pt or bold 14pt)
Needs ≥ 3:1
AAA NormalPASS
Enhanced normal text
Needs ≥ 7:1
AAA LargePASS
Enhanced large text
Needs ≥ 4.5:1
How to check WCAG contrast
Step 1
Pick text and background colors
Enter hex codes or use the color pickers to set your foreground text color and background color.
Step 2
Check the contrast ratio
The tool calculates the WCAG contrast ratio and shows pass/fail for all four accessibility criteria.
Step 3
Adjust until accessible
Use the swap button or adjust colors until your combination passes the desired WCAG level.
FAQ
What is the WCAG contrast ratio requirement?
WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt or bold 14pt). Level AAA requires 7:1 for normal text and 4.5:1 for large text.
How is the contrast ratio calculated?
The tool uses the WCAG relative luminance formula, which converts RGB values to linear light values before computing the luminance difference as a ratio.
What is 'large text' in WCAG?
Large text is defined as 18pt (24px) or larger for regular weight, or 14pt (approximately 18.67px) or larger for bold weight text.
Should I target AA or AAA compliance?
AA is the standard for most websites and is required for legal compliance in many jurisdictions. AAA is the highest level and is recommended for critical interfaces like healthcare or government sites.