🔍 Color Accessibility & Analysis Tools
Verify your colors meet accessibility standards, simulate color blindness, mix and adjust colors, and analyze perceived brightness for inclusive, high-quality design.
Quick Answer
WCAG 2.1 AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt+). Black on white achieves the maximum ratio of 21:1.
Example: #FFFFFF on #1D4ED8 (blue-700) = 7.2:1 — passes AAA • #6B7280 on #FFFFFF = 4.6:1 — passes AA
All Check Tools
Color Accessibility: Why It Matters
Approximately 300 million people worldwide have some form of color vision deficiency, and 2.2 billion people have near or distance vision impairment. Designing with accessibility in mind isn't just about legal compliance — it makes your product usable for a significantly larger audience and often improves the experience for all users.
The Web Content Accessibility Guidelines (WCAG) provide quantitative standards for color contrast. These guidelines, published by the W3C, are referenced in laws including the Americans with Disabilities Act (ADA) and the EU Web Accessibility Directive. WCAG 2.1 Level AA is the generally accepted minimum standard for commercial websites.
Understanding WCAG Contrast Ratios
A contrast ratio is a number from 1:1 (identical colors) to 21:1 (pure black on pure white). It's calculated from the relative luminance of the two colors. WCAG 2.1 requires:
- AA (minimum): 4.5:1 for normal text; 3:1 for large text (18pt+ regular or 14pt+ bold)
- AAA (enhanced): 7:1 for normal text; 4.5:1 for large text
- UI components and graphical objects: 3:1 against adjacent colors
Note that these ratios apply to text-background combinations. Decorative elements, logos, and inactive UI components are exempt from contrast requirements.
Designing for Color Blindness
The most common form of color blindness (deuteranopia/deuteranomaly) causes difficulty distinguishing red from green. This affects about 5% of all men. When red and green are your primary status indicators (error vs. success), add secondary cues: use icons, labels, patterns, or position to differentiate — not color alone.
Safe practices for color-blind users: never use color as the only means of conveying information; ensure adequate contrast for all text; use patterns or textures in addition to color for charts and graphs; test your designs with a color blindness simulator before publishing. Our color blindness simulator shows your colors as they would appear to users with the four main types of color vision deficiency.
Tints, Shades, and Color Variations
A tint is a color mixed with white (higher lightness in HSL), producing a lighter, pastel version. A shade is a color mixed with black (lower lightness), producing a darker, deeper version. A tone is a color mixed with gray (lower saturation). These terms are often confused: "dark blue" and "navy" are both shades of blue, while "light blue" and "sky blue" are tints.
For design systems, a common approach is to create a scale of 9–11 values for each brand color: from a very light tint (e.g., 50) to the base color (e.g., 500) to a very dark shade (e.g., 900). This gives you flexibility for backgrounds, borders, text, and interactive states while maintaining color consistency.
Frequently Asked Questions
What is WCAG color contrast and why does it matter?
WCAG contrast requirements ensure text is readable for people with low vision. WCAG 2.1 AA requires 4.5:1 contrast for normal text and 3:1 for large text (18pt+). AAA requires 7:1 for normal text. Contrast ratio ranges from 1:1 (same color) to 21:1 (black on white).
What types of color blindness are there?
About 8% of men and 0.5% of women have color vision deficiency. Main types: Deuteranopia (5% of men, green sensitivity), Protanopia (1% of men, red sensitivity), Tritanopia (rare, blue sensitivity), Achromatopsia (very rare, complete grayscale vision). Never use color as the only way to convey information.
How do I mix two colors together?
In RGB additive mixing, each channel is averaged at a given ratio. Mixing red (255,0,0) and blue (0,0,255) at 50% gives (127,0,127) — a purple. In CSS you can use color-mix(): color-mix(in srgb, red 50%, blue 50%) in modern browsers.
How do I lighten or darken a color?
Convert to HSL and adjust the Lightness value. Increasing Lightness creates a tint; decreasing creates a shade. This preserves hue and saturation perfectly. Example: hsl(220, 90%, 56%) lightened to hsl(220, 90%, 75%) or darkened to hsl(220, 90%, 35%).
What is perceived brightness and how is it calculated?
Perceived brightness uses the WCAG relative luminance formula: L = 0.2126R + 0.7152G + 0.0722B (linearized values). Human eyes are most sensitive to green, less so to red, and least to blue. Colors with luminance above ~0.5 appear light; below appear dark.