Essential cookies keep Huevex running. With your permission we also measure how the site is used. Nothing optional loads until you choose. Cookie Policy
Color should communicate, not exclude. Learn the WCAG contrast guidelines, understand color vision deficiencies, and test any two colors for compliance with the contrast checker below.
Looking for just the numbers? Open the contrast checker - two colors in, WCAG AA and AAA results out, with a suggested nearest passing color when a pair fails.
Enter a text color and a background color to see the contrast ratio and whether it passes WCAG AA and AAA for normal text, large text, and UI components.
The quick brown fox jumps
Sample body copy shows real-world legibility at typical reading sizes.
SMALL LABEL · UI ELEMENT · 12PX
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text and its background to ensure content is readable for people with low vision, color blindness, or situational impairments like glare.
Contrast is measured as a ratio from 1:1 (no contrast) to 21:1 (black on white). The guidelines set thresholds across three conformance levels - A, AA, and AAA - with AA being the most widely referenced legal and standard baseline.
The baseline tier. Addresses the most fundamental accessibility barriers - such as providing text alternatives for non-text content and ensuring content is perceivable in some form. Most sites should exceed this.
The conformance level referenced by most legal frameworks and accessibility laws (ADA, EN 301 549, Section 508). This is the target most organizations aim for and what Huevex checks by default.
The highest tier. Not required for whole sites and not always achievable for all content, but recommended where stricter readability is needed (e.g. healthcare, finance, government).
Around 8% of men and 0.5% of women have some form of color vision deficiency. Designing palettes that remain distinguishable across these conditions is a core part of accessible color work.
Red-blind. Difficulty distinguishing red from green; reds can appear dark or blackened.
Green-blind. The most common form; reds and greens look similar, often muddy.
Blue-yellow deficiency. Blues and greens are hard to tell apart, yellows may shift.
Complete color blindness - no color perception, only brightness. Design must work in greyscale.
Pair hue with labels, icons, patterns, or text. A red error border should also carry an icon or message - otherwise color-blind users miss it.
Interactive elements need a visible focus outline with at least 3:1 contrast against the background - keyboard users depend on it.
A ratio that passes on white can fail on a dark surface. Verify every theme, including dark mode and high-contrast variants.
Icons, chart strokes, and component borders need 3:1 against adjacent colors. Decorative imagery is exempt.
Large display text can dip to 3:1, but body copy should always meet the 4.5:1 AA baseline for sustained reading.
Links inside text need contrast against surrounding text (3:1) and against their background (4.5:1). Underlines help.