Color Contrast Checker – WCAG AA & AAA Calculator

Why Accessible Contrast Matters

Color contrast describes the difference in perceived luminance (brightness) between two adjacent colors—typically text and the surface it sits upon. When contrast is insufficient, users must strain to decipher characters, slowing comprehension and increasing cognitive fatigue.

Designing with accessible contrast is not merely for people diagnosed with visual impairments like low vision or color blindness. It directly benefits anyone:

• Viewing your website on a mobile device under direct bright sunlight.
• Using a budget display with poor color gamut or degraded viewing angles.
• Experiencing temporary eye strain after prolonged screen time.
• Using a smartphone with battery-saver mode that drops screen brightness down to 20%.

Understanding the WCAG 2.1 Thresholds

The Web Content Accessibility Guidelines (WCAG) define objective mathematical benchmarks for digital content readability. Rather than relying on personal subjective opinion, WCAG provides numeric ratios ranging from 1:1 (zero contrast, e.g., white on white) to 21:1 (maximum contrast, pure black on pure white).

5 Common UI Contrast Mistakes (and How to Fix Them)

1. Faint Placeholder Text in Form Fields

Many form inputs use very light gray placeholder text (such as #CCCCCC on a #FFFFFF input). When users cannot read what an input expects, submission errors skyrocket. Solution: Use visible floating labels or explicit label tags above the input with at least 4.5:1 contrast, reserving subtle styling only for optional helper text that still clears minimum visibility.

2. Colored Text on Saturated Brand Backgrounds

Placing blue text on a green button or white text on an electric yellow badge is visually jarring and frequently fails contrast calculations. While both colors may look bold and bright, their mathematical luminance is too close together. Solution: Darken the button background or shift text to a dark charcoal (#12121e) when using high-luminance background colors.

3. Low-Contrast Disabled Buttons

While WCAG exempts inactive/disabled elements from strict contrast enforcement, making a disabled button completely invisible confuses users who do not understand why an action cannot be taken. Solution: Retain visible outlines or clear iconography so users can tell an element exists even if it is currently inactive.

4. Pure Black and Pure White in Dark Mode

Setting body text to pure #FFFFFF on a pure #000000 background can cause an uncomfortable visual effect known as halation or light scattering, particularly for users with astigmatism. Solution: Soften the background to a rich dark charcoal (e.g., #0e0e1a or #121218) and use an off-white text tone (e.g., #f0f0fa) to maintain crisp 15:1+ contrast without harsh glare.

5. Relying Exclusively on Color to Convey Status

If an error message is indicated solely by red text, a user with protanopia or deuteranopia (red-green color blindness) may see it as a dull brown or dark olive, missing the warning entirely. Solution: Always pair color cues with secondary signals, such as an exclamation icon, an underline, or explicit textual prefixes like "Error:".

Step-by-Step Checklist for Auditing Your Palette

1. Map your background surfaces: Identify your default page background, card surfaces, modal layers, and input field fills.
2. Check body text first: Ensure your primary body copy achieves at least 4.5:1 against every surface it appears on.
3. Audit secondary text: Verify that captions, timestamps, and metadata tags don't dip below 4.5:1.
4. Test button states: Measure primary buttons (background vs text), secondary outlined buttons (border vs background), and hover/focus states.
5. Inspect dark mode switches: Invert your palette and verify that accent colors remain readable against dark surfaces without losing brand identity.