Color Contrast Checker (WCAG)
Verify your colors meet WCAG accessibility standards — free, instant, no account.
What is it?
Color Contrast Checker is a free browser-based accessibility tool that calculates the contrast ratio between a foreground and background color according to the WCAG 2.1 specification. Enter or pick two colors, and the tool instantly shows you the contrast ratio, whether it passes WCAG Level AA and Level AAA for both normal text and large text, and a live preview of how the text actually looks on that background. Export a clean PNG report to share with your team or include in accessibility audits — all client-side, no server needed.
How to use it
- Pick your foreground (text) color using the color picker or by typing a hex code.
- Pick your background color the same way.
- The contrast ratio and WCAG pass/fail badges update instantly.
- Check the live preview to see how readable your text really looks at different sizes.
- Click "Export Report PNG" to download a summary image of the result.
Why use this tool
Web accessibility is not just a best practice — in many countries it is a legal requirement. The WCAG 2.1 guidelines specify that normal text must achieve at least a 4.5:1 contrast ratio (AA) and ideally 7:1 (AAA), while large text (18pt or bold 14pt) requires 3:1 (AA) or 4.5:1 (AAA). Catching contrast issues early in your design process saves costly remediation later. This tool gives you instant, accurate results without installing browser extensions, opening design tools, or sharing your color palettes with external services.
Frequently asked questions
What is the WCAG contrast ratio requirement?
WCAG 2.1 Level AA requires a 4.5:1 ratio 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.
What counts as "large text" in WCAG?
Large text is defined as at least 18 point (24px) for regular weight, or at least 14 point (18.66px) for bold weight.
Can I enter colors as RGB or HSL instead of hex?
The input fields accept hex codes directly, and you can use the built-in color picker which supports any color model. The ratio is computed from the sRGB values regardless of how you entered the color.
Does passing AA guarantee my site is accessible?
Contrast is one important factor, but full accessibility also includes font size, line spacing, keyboard navigation, and screen reader compatibility. Treat this tool as one part of a broader audit.
What does the exported PNG contain?
The PNG shows both colors as swatches, the contrast ratio, and the pass/fail status for all four WCAG criteria (AA normal, AA large, AAA normal, AAA large).