Color Contrast Checker
Check if your text color and background color combination meets WCAG 2.1 accessibility standards. Instant results — no signup required.
The quick brown fox
This is how your body text will look with these colors.
And this is small text (14px regular).
WCAG 2.1 Contrast Ratio
AA Normal
≥ 4.5:1
AA Large
≥ 3:1
AAA Normal
≥ 7:1
AAA Large
≥ 4.5:1
Suggestion: To pass WCAG AA for normal text, try adjusting the text color to
Understanding Color Contrast for Accessibility
What is Color Contrast?
Color contrast is the difference in luminance between the foreground (text) color and the background color. Higher contrast makes text easier to read for everyone, including people with low vision, color blindness, or those using screens in bright sunlight.
WCAG 2.1 Contrast Requirements
The Web Content Accessibility Guidelines (WCAG) 2.1 define minimum contrast ratios for text. Level AA is the standard most websites should meet. Level AAA provides enhanced accessibility.
| Level | Normal Text | Large Text |
|---|---|---|
| WCAG AA | 4.5:1 | 3:1 |
| WCAG AAA | 7:1 | 4.5:1 |
What counts as 'large text'?
Large text is defined as 18px (24px CSS) or larger at normal weight, or 14px (18.66px CSS) or larger at bold weight (700+). Large text has a lower contrast requirement because bigger characters are inherently easier to read.
How is the contrast ratio calculated?
The contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. Relative luminance is calculated from the sRGB color values using a linearization formula. The resulting ratio ranges from 1:1 (identical colors) to 21:1 (black on white).
Frequently Asked Questions
For WCAG AA compliance, normal text (smaller than 18px or 14px bold) needs a contrast ratio of at least 4.5:1. Large text (18px+ or 14px+ bold) needs at least 3:1. Most web accessibility laws reference WCAG AA as the minimum standard.
WCAG AA is the standard compliance level — it provides sufficient contrast for most users. WCAG AAA is enhanced accessibility with stricter requirements (7:1 for normal text, 4.5:1 for large text). AAA is recommended for text-heavy content like articles and legal documents, but is not required for general compliance.
This tool checks contrast between two solid colors. For text over images, gradients, or videos, the contrast varies across the element. BeaverCheck's full website audit includes screenshot-based contrast analysis that samples actual rendered pixels behind text elements.
WCAG contrast ratios are based on luminance, not hue, so they provide a reasonable baseline for most types of color vision deficiency. However, they don't fully address all color blindness scenarios. Avoid relying solely on color to convey information — use text labels, icons, or patterns as supplements.
4.5:1 is the minimum for WCAG AA compliance, not the ideal. For the best readability, aim for 7:1 or higher. Many design systems recommend using near-black text (#1A1A1A or #111827) on white backgrounds, which provides a ratio of about 16:1.
Want to check your entire website for contrast issues?
BeaverCheck scans your page screenshot and tests contrast for the top 20 text elements against real rendered backgrounds — including images and gradients.
Run a Full Website Audit →