Live preview
The quick brown fox
jumps over the lazy dog, this is what normal body text looks like at this contrast.
Small print and captions look like this.
Color blindness preview
Approximate simulations, actual perception varies by individual and severity.
About WCAG contrast
What do AA and AAA mean? ▾
These are WCAG 2.1 conformance levels. AA is the standard most sites target: 4.5:1 for normal text, 3:1 for large text (18pt+/24px+, or 14pt/19px+ bold). AAA is stricter, 7:1 for normal text, 4.5:1 for large text, recommended for content aimed at users with low vision.
How is the contrast ratio calculated? ▾
It's the ratio between the relative luminance of the lighter and darker color, from 1:1 (identical) to 21:1 (pure black on pure white), the WCAG formula weights red, green and blue differently to match human perception of brightness.
Does the eyedropper work in every browser? ▾
The screen eyedropper uses the browser's built-in EyeDropper API, currently supported in Chromium-based browsers (Chrome, Edge, Opera). Elsewhere, use the color swatch or type a hex value directly.