Color Contrast Checker
Check WCAG contrast ratios between two colors
Color Contrast Checker is a free online tool from BrowserUtils that check wcag contrast ratios between two colors. It runs entirely in your browser — your data never leaves your device. No account required.
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)
How to use Color Contrast Checker
- 1 Paste or type your input into the editor above.
- 2 The tool processes your data instantly — right in your browser, with nothing sent to a server.
- 3 Copy the result with one click or continue editing your input.
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.
Color Contrast Checker specs
- Runtime
- 100% client-side (browser)
- Built on
- CSS Color Module Level 4 conversions (sRGB, OKLCH, OKLAB) and native CSSOM parsing
- Cost
- Free — no account, no rate limits, no usage caps
- Browser support
- Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
- Part of
- 299 developer tools on BrowserUtils (100% client-side)
Questions
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.
What counts as large text under WCAG?
Large text is defined as 18pt (24px) and above at normal weight, or 14pt (18.66px) and above at bold weight. Large text has lower contrast requirements because it is easier to read.
How do I fix a failing contrast ratio?
Darken the text color or lighten the background (or vice versa) until the ratio meets the 4.5:1 threshold for AA. This tool shows the ratio in real time so you can adjust colors until they pass.
Comments
Related tools
More CSS & Design
Color ConverterCSS Gradient GeneratorBox Shadow GeneratorPX to REM ConverterColor Palette GeneratorTailwind Color PickerCSS Animation GeneratorCSS Flexbox Generator
View all CSS & Design tools
Comments