Color Contrast Checker
// Check WCAG contrast ratios between two colors
Large Text Sample
Normal text sample — The quick brown fox jumps over the lazy dog.
21.00:1
PASS — Normal Text AA (4.5:1)
PASS — Normal Text AAA (7:1)
PASS — Large Text AA (3:1)
PASS — Large Text AAA (4.5:1)
#About Color Contrast Checker
Free online color contrast checker. Verify WCAG 2.1 contrast ratios for text and background color combinations to ensure accessibility compliance. This tool runs entirely in your browser — your data is never sent to a server. Just paste your input, get instant results, and copy with one click. No sign-up or installation required.
#FAQ
What WCAG contrast ratio is required? ▾
WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text (AA) and 7:1 for enhanced contrast (AAA). Large text requires 3:1 for AA and 4.5:1 for AAA.
How is contrast ratio calculated? ▾
Contrast ratio is calculated using the relative luminance of two colors according to the WCAG 2.1 formula: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color luminance.
</> Embed this tool ▾
Copy this code to embed the tool on your website. Adjust the height to fit your layout.
<iframe src="https://www.browserutils.dev/embed/color-contrast-checker" width="100%" height="500" frameborder="0" title="Color Contrast Checker"></iframe>