Quick answer: To meet WCAG, put text and its background at a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (Level AA) — 7:1 and 4.5:1 for the stricter Level AA. Interactive UI components and meaningful graphics need 3:1. Contrast is measured as
(L1 + 0.05) / (L2 + 0.05)on the two colors' relative luminance, so the safest combinations pair colors with a large brightness difference, not just different hues. And because contrast only measures luminance, never use color as the only signal for meaning — pair it with text, an icon, or a pattern.
That is the summary an AI Overview will hand you, and it is correct as far as it goes. What it can't show you is why combinations that look fine still fail, where the thresholds sit on a ratio scale, and how to move a failing pair to passing without wrecking your palette. The diagram, tables, and decision guide below do that — and there is a live contrast checker built into our color picker tool so you can test your own hex values as you read.
The contrast ratio scale at a glance
Every WCAG threshold is a point on a single 1:1-to-21:1 scale. Seeing where the cut-offs sit makes it obvious why a "nice" mid-gray on white so often lands just short.
WCAG contrast requirements, side by side
| Content type | Level AA (typical target) | Level AAA (stricter) | What counts |
|---|---|---|---|
| Normal text | 4.5:1 | 7:1 | Anything below 18pt/24px regular or 14pt/18.66px bold |
| Large text | 3:1 | 4.5:1 | 18pt/24px regular or 14pt/18.66px bold and larger |
| UI components & graphics | 3:1 | (n/a) | Input borders, focus rings, icons, chart bars that convey meaning |
| Disabled / decorative | No requirement | No requirement | Inactive controls and purely decorative color are exempt |
| Which should I use? | Aim for AA everywhere — it is the bar for ADA/Section 508, EN 301 549, and most procurement | Use AAA for long-form reading, low-vision audiences, or sunlight/kiosk use | Placeholder text inside an active field is NOT exempt — it needs 4.5:1 |
Understanding Web Accessibility and Color
Color accessibility is a critical but often overlooked aspect of web design. Approximately 8% of men and 0.5% of women have some form of color vision deficiency (color blindness), and many more people have low vision or use assistive technologies. Additionally, many people view websites on low-contrast screens, in bright sunlight, or with poor displays that reduce color accuracy.
Creating accessible color combinations ensures that all users can read and interact with your content, regardless of their vision capabilities or the device they use.
The Web Content Accessibility Guidelines (WCAG)
The Web Content Accessibility Guidelines (WCAG) are international standards developed by the World Wide Web Consortium (W3C) that define how to make web content accessible to people with disabilities. WCAG 2.2 became the official W3C Recommendation in October 2023 and is the version to build against today; WCAG 2.1 is still widely referenced in law and procurement, and for color and contrast the two are identical. WCAG 3.0 is a longer-term draft that may eventually replace the simple ratio with a perceptual model (APCA), but it is not yet a standard.
WCAG includes specific guidance on color and contrast. The key requirements for accessible color are:
Text contrast requirements specify minimum contrast ratios between text and background.
Color should not be the only means of conveying information. If you're using color to indicate status, you must also use text, icons, or patterns.
These two requirements ensure that people with color blindness, low vision, and other visual impairments can access content.
Understanding Contrast Ratio
Contrast ratio is a mathematical measurement of the difference between two colors. It's calculated using the relative luminance of each color and is expressed as a ratio like 4.5:1 or 7:1.
Luminance is a measure of how much light a color emits or reflects. It's based on the RGB values of a color and accounts for how human vision perceives brightness in different color channels.
The contrast ratio formula 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.
Higher contrast ratios indicate greater difference between colors. A ratio of 7:1 means one color is seven times brighter than the other. A ratio of 1:1 means the colors are identical and have no contrast.
WCAG Contrast Requirements
WCAG defines minimum contrast requirements for different types of content:
For normal text (text smaller than 14pt bold or 18pt normal), WCAG Level AA requires a contrast ratio of at least 4.5:1. WCAG Level AAA (stricter) requires 7:1.
For large text (text 14pt bold or larger, or 18pt or larger normal text), WCAG Level AA requires a contrast ratio of at least 3:1. WCAG Level AAA requires 4.5:1.
For user interface components and graphical elements, WCAG Level AA requires a contrast ratio of at least 3:1 against adjacent colors.
Most web accessibility standards target WCAG Level AA compliance, which is a good balance between accessibility and design flexibility.
Testing Contrast Ratio
To determine whether your colors meet WCAG requirements, you need to measure the contrast ratio. Several tools make this easy:
Contrast ratio calculators are available online. Websites like WebAIM's Contrast Checker allow you to input two colors and immediately see the contrast ratio and WCAG compliance.
Browser color picker tools often include contrast checking. Modern browsers include accessibility tools that show contrast ratios when you inspect elements.
Design tools like Figma include built-in contrast checking. When designing, you can check contrast in real-time.
Accessibility testing tools like axe DevTools automatically test your website and report contrast violations.
Creating Accessible Color Combinations
Here are practical steps for creating accessible color combinations:
Start with sufficient contrast. When selecting text and background colors, prioritize contrast over aesthetics. A beautiful color combination that fails contrast requirements isn't usable.
Test systematically. Don't assume colors will work. Test actual color combinations against actual text sizes to verify compliance.
Use high-contrast colors intentionally. Bright colors often have better contrast. Pale pastels often fail contrast requirements.
Avoid problematic color combinations. Red and green have similar brightness to some people with color vision deficiency. Red and blue also can be challenging. When possible, use colors with different brightness levels.
Check in different contexts. Colors might meet contrast requirements in one situation but fail in others. Test text colors, link colors, and interactive element colors.
Consider multiple users. Test with people who have color blindness if possible. Tools simulating color blindness can help identify potential issues.
Use system contrast settings. Some users apply high-contrast modes in their operating system. Test your website with Windows High Contrast Mode enabled to ensure it remains usable.
Common failures and how to fix them
Most contrast problems come from a handful of recurring patterns. Here is the symptom, the underlying cause, and the fix that keeps the design intact.
| Symptom | Cause | Fix |
|---|---|---|
| Light-gray body text (e.g. #999 on white ≈ 2.85:1) | Chasing a "soft" look; gray reads as low-effort elegance | Darken to at least #767676 on white (4.5:1); use weight or size for softness instead of low contrast |
| Text over a hero photo or gradient passes on one crop, fails on another | Contrast measured against the wrong background pixel | Add a solid or semi-opaque scrim/overlay behind the text, or a text-shadow, so the worst-case pixel still hits 4.5:1 |
| Placeholder text flagged by axe | Placeholders in active fields are not exempt | Meet 4.5:1 on the placeholder, or replace it with a persistent visible label |
| Red/green status dots indistinguishable to some users | Color used as the only signal; similar luminance | Add an icon or text label (✓ / ✕, "Paid" / "Overdue") alongside the color |
| Brand blue button label unreadable | White text on a mid-tone brand color below 4.5:1 | Darken the button fill, or switch label to a darker shade; verify the pair, don't eyeball it |
| Focus ring invisible on colored buttons | Focus indicator below 3:1 against adjacent colors | Use a 3:1+ outline color (often a dark or offset ring) per SC 1.4.11 |
Color and Meaning
An important accessibility principle is that color alone should not convey information. If you use color to indicate status, error conditions, required fields, or other important information, you must also use text, icons, or patterns to convey the same information.
For example, don't indicate that a form field is required by only coloring it red. Instead, use a red asterisk AND the text "required" or a red border AND an error icon. This ensures that people who cannot perceive red (red color blindness) still understand that a field is required.
Similarly, don't indicate success or error using only color. Use color in combination with:
Text messaging that clearly states the status
Icons like checkmarks or X marks
Patterns or textures that create visual distinction
This ensures that all users, regardless of color perception, understand the meaning.
Color Blindness Considerations
Different types of color vision deficiency make different colors difficult to distinguish:
Red-green color blindness (protanopia or deuteranopia) is the most common form. People with red-green color blindness have difficulty distinguishing red and green colors. They may see these colors as variations of brown or yellow.
Blue-yellow color blindness (tritanopia) is less common. People with blue-yellow color blindness have difficulty distinguishing blue and yellow colors.
Monochromacy (total color blindness) is very rare. People with this condition see only in shades of gray.
To ensure accessibility for people with color blindness:
Avoid relying on red-green color combinations to communicate critical information.
Avoid blue-yellow combinations when possible.
Test designs with color blindness simulation tools. These tools show you how your color combinations appear to people with different types of color blindness.
Use high-contrast colors and avoid similar-brightness colors that only differ in hue.
Practical Accessibility-Friendly Palettes
Some color combinations are naturally accessible:
Black text on white background: High contrast, works for everyone. Classic and reliable.
Dark blue text on light gray background: High contrast, good for extended reading.
White text on dark backgrounds: Creates good contrast, useful for dark mode designs.
Dark text with colored backgrounds: If using colors, ensure sufficient brightness difference between text and background.
Colors with different brightness: Pair darker colors with lighter colors. Avoid colors that appear the same brightness but different hues.
Tools for Accessible Color Selection
Several tools help create accessible color combinations:
WebAIM Contrast Checker: Enter two colors and see if they meet WCAG requirements.
Coolors Contrast Checker: Check multiple color combinations and see which meet requirements.
Accessible Colors: Suggests accessible color combinations and explains why they work.
Color Oracle: A color blindness simulator that shows you how colors appear to different types of color blindness.
Deque axe DevTools: Browser extension that automatically tests accessibility, including contrast violations.
Figma's accessibility features: Built-in contrast checking and accessibility audit tools.
Best Practices for Accessible Color
Document your color decisions. When you select colors, document why you selected them and confirm they meet WCAG requirements.
Create color palettes with accessibility in mind. Develop your palette by first identifying colors that meet contrast requirements.
Test early and often. Don't wait until the end of a project to check accessibility. Test color contrast during design.
Test with real users if possible. People with color vision deficiency can provide valuable feedback.
Go beyond minimum standards. While WCAG Level AA is a good baseline, consider aiming for stronger contrast in critical areas.
Remember that accessibility is not about compromise. Accessible color combinations can be beautiful and effective. The goal is ensuring everyone can use your website effectively.
Creating accessible color combinations requires understanding contrast ratios, knowing WCAG requirements, and testing your colors systematically. By following these practices, you ensure that your website is usable by everyone, regardless of their vision capabilities or devices used.