How to Check Color Contrast for Accessibility

1. What Is WCAG?

WCAG (Web Content Accessibility Guidelines) is the international standard for web accessibility, maintained by the W3C (World Wide Web Consortium). It provides a set of success criteria organized around four principles: Perceivable, Operable, Understandable, and Robust (POUR).

WCAG 2.2, released in October 2023, is the current version. It builds on WCAG 2.1 with additional criteria focused on mobile accessibility, cognitive disabilities, and user input. Color contrast falls under the "Perceivable" principle — specifically Success Criterion 1.4.3 (Contrast Minimum) and 1.4.6 (Contrast Enhanced).

The guidelines define three conformance levels: A (minimum), AA (standard), and AAA (enhanced). Most legal requirements and organizational policies target Level AA compliance. Level AAA is aspirational — meeting it for all content is often impractical, but striving for it wherever possible benefits all users.

2. Contrast Ratio Explained

A contrast ratio is a number that describes the relative luminance difference between two colors. It ranges from 1:1 (no contrast — identical colors) to 21:1 (maximum contrast — pure black on pure white). The formula uses the relative luminance of each color, which accounts for how the human eye perceives brightness differently across the color spectrum.

The calculation works like this: take the lighter color's relative luminance, add 0.05, and divide by the darker color's relative luminance plus 0.05. Relative luminance itself is calculated by converting sRGB values through a gamma correction formula that weights green most heavily (our eyes are most sensitive to green light), followed by red, then blue.

You don't need to do this math yourself — tools handle it automatically. What matters is understanding that the resulting ratio tells you how readable text will be against a given background. Use Hue's contrast checker to test any combination instantly.

3. AA vs AAA Compliance

The two contrast levels you'll encounter most often are AA and AAA. Understanding the difference is crucial for setting the right targets for your project.

For most projects, target AA across the board and AAA where feasible (especially for body text, which users spend the most time reading). Large headings have more relaxed requirements because their size already aids readability.

WCAG defines "large text" as at least 18 point (24px) regular weight or 14 point (approximately 18.66px) bold. Anything below those thresholds is considered normal text and needs the higher contrast ratio.

4. Why Accessibility Matters

Web accessibility isn't just good practice — it's increasingly a legal requirement with direct business consequences.

The Numbers

The World Health Organization estimates that 1.3 billion people — roughly 16% of the global population — experience significant disability. Of these, approximately 2.2 billion have near or distance vision impairment, and 300 million are color blind. These aren't edge cases. They represent a massive portion of your potential audience who will struggle or leave if your colors don't have adequate contrast.

Legal Compliance

In the United States, web accessibility lawsuits under the ADA have surged. Over 4,600 digital accessibility lawsuits were filed in 2023 alone. The European Accessibility Act (EAA), effective June 2025, requires digital products and services to meet accessibility standards across the EU. Australia's Disability Discrimination Act, Canada's Accessible Canada Act, and the UK's Equality Act all include provisions that apply to websites.

Business Impact

Beyond legal risk, accessibility is good business. Accessible sites tend to have better SEO (search engines value semantic HTML and good structure), lower bounce rates (readable text keeps people engaged), and wider market reach. The disposable income of disabled people globally is estimated at over $8 trillion. Excluding them from your product isn't just wrong — it's expensive.

5. How to Test Contrast

Testing contrast should be a regular part of your design and development workflow — not a final audit step. Here's how to integrate it at every stage.

During Design

Use Hue's contrast checker while selecting colors. Enter your foreground and background hex values and instantly see the contrast ratio with AA and AAA pass/fail indicators for both normal and large text. This catches issues before they reach code.

During Development

Browser DevTools have built-in contrast checking. In Chrome, inspect any text element, click the color swatch in the Styles panel, and the color picker shows the contrast ratio against its background with WCAG pass/fail indicators. Firefox and Safari have similar features.

Automated Testing

Integrate accessibility linting into your CI/CD pipeline. Tools like axe-core, Lighthouse, and pa11y can automatically flag contrast violations on every deploy. These catch regressions when new features inadvertently introduce low-contrast text.

Manual Auditing

Automated tools catch about 30-40% of accessibility issues. Manual testing remains essential. Tab through your site to check focus indicators. Use browser zoom (200%) to verify readability. Test with screen readers. And simply squint — if you can't read text while squinting, your contrast needs work.

6. Fixing Low Contrast Issues

Found contrast failures? Here are practical techniques to fix them without redesigning your entire palette.

Darken or Lighten

The simplest fix: adjust the lightness of your text or background until the ratio meets the threshold. Often, darkening text by just 10-15% in HSL lightness is enough to cross 4.5:1. This preserves your brand color's hue and saturation while improving readability.

Increase Font Size or Weight

Remember: large text (≥18pt regular or ≥14pt bold) only needs 3:1. If your text is close to passing at 4.5:1, making it larger or bolder might bring it into compliance without changing colors at all. This is especially useful for headings and UI labels.

Add a Background

For text on variable backgrounds (like photos), add a semi-transparent overlay or solid background behind the text. A dark overlay of rgba(0, 0, 0, 0.6) behind white text creates reliable contrast regardless of the image beneath.

Use Your Palette Generator

Tools like Hue's palette generator create colors that already have good tonal range. Starting with a well-structured palette prevents most contrast issues before they start.

7. Text on Images

Placing text directly over images is one of the most common contrast failures on the web. Images have variable brightness — a color that's readable over the dark part of a photo may vanish over a bright area.

Overlay Techniques

/* Dark overlay for white text */
.hero-image {
  position: relative;
}
.hero-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.1),
    rgba(0, 0, 0, 0.7)
  );
}

/* Frosted glass effect */
.text-overlay {
  backdrop-filter: blur(8px);
  background: rgba(0, 0, 0, 0.5);
  padding: 1rem 1.5rem;
  border-radius: 0.75rem;
}

A gradient overlay that's darker at the bottom (where text usually sits) preserves the image's visual impact while ensuring readability. The frosted glass technique works well for floating text boxes — it adapts to any underlying image brightness while maintaining contrast. For more on gradient techniques, see our guide on how to create CSS gradients.

Text Shadow

Adding a subtle text shadow can improve readability without overlays: text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8). However, WCAG doesn't count text shadows in contrast calculations. Treat them as an enhancement, not a solution.

8. Color Blindness Considerations

Color vision deficiency (CVD), commonly called color blindness, affects how people perceive color differences. Designing for CVD isn't about removing color — it's about ensuring information is never conveyed by color alone.

Design Strategies for Color Blindness

• Use icons alongside color: Don't just make errors red — add an error icon (✗) and error text
• Add patterns or textures: In charts and graphs, use distinct patterns (stripes, dots) in addition to colors
• Avoid red/green only combinations: Use red/blue or orange/blue for contrasting states
• Test with simulation tools: Chrome DevTools > Rendering > Emulate vision deficiencies
• Ensure sufficient luminance contrast: If two colors look different in grayscale, they'll work for color-blind users

9. CSS Techniques for Better Contrast

Modern CSS provides several techniques to ensure and maintain good contrast across your designs.

Focus Indicators

/* High-contrast focus ring */
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* Remove default, add custom */
button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-bg),
              0 0 0 5px var(--color-accent);
}

Respecting User Preferences

/* Increase contrast when user prefers it */
@media (prefers-contrast: more) {
  :root {
    --color-text: #000000;
    --color-bg: #ffffff;
    --color-border: #000000;
  }
}

/* Reduce motion AND increase contrast */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}

/* Forced colors (Windows High Contrast) */
@media (forced-colors: active) {
  .custom-button {
    border: 2px solid ButtonText;
  }
}

The prefers-contrast media query, now supported in all major browsers, lets you provide enhanced contrast versions of your design for users who've configured their OS to request it. Combined with CSS custom properties, you can swap to a high-contrast palette with just a few lines of CSS. See MDN's accessibility documentation for full details.

10. Tools and Browser Extensions

The right tools make accessibility testing fast and routine rather than a chore.

Frequently Asked Questions

12. WCAG 2.2 vs WCAG 3.0 APCA

The current WCAG 2.2 contrast algorithm has served the web well, but it has known limitations. The upcoming WCAG 3.0 specification introduces a fundamentally different approach to measuring contrast called APCA (Accessible Perceptual Contrast Algorithm), developed by Andrew Somers. Understanding the differences now will prepare you for the transition ahead.

How WCAG 2.x Contrast Works

The current WCAG 2.2 method calculates a simple luminance ratio between foreground and background colors. It treats all colors the same regardless of whether the text is light-on-dark or dark-on-light, and it doesn't account for font size or weight beyond the basic "large text" threshold. This leads to situations where the math says a combination passes but human eyes disagree — particularly with dark-on-dark or light-on-light pairings where the ratio is technically adequate but readability is poor.

What APCA Changes

APCA is a perceptually modeled algorithm that accounts for how human vision actually works. It considers polarity (light text on dark backgrounds is perceived differently from dark text on light backgrounds), spatial frequency (font size and weight affect perceived contrast), and the non-linear way our eyes adapt to different luminance levels. Instead of a single ratio, APCA produces a Lightness Contrast (Lc) value that ranges from 0 to approximately 108.

For example, APCA recognizes that 14px bold text needs a higher Lc value than 24px bold text to be equally readable — something the current WCAG model handles only with its rough large/normal split. APCA also correctly identifies that white text on a medium-blue background is more readable than black text on the same background at the same mathematical contrast ratio, because human perception of lightness contrast is asymmetric.

Should You Switch Now?

WCAG 3.0 is still in draft status and won't replace WCAG 2.2 as the legal standard anytime soon. For compliance purposes, continue targeting WCAG 2.2 AA ratios. However, using APCA as an additional check during design — especially for edge cases where the WCAG 2.x ratio seems wrong — gives you a more accurate picture of real-world readability. Many designers already use both tools in parallel.

13. Color Contrast for Different UI Elements

Not all UI elements are created equal when it comes to contrast requirements. WCAG defines different rules for different element types, and understanding these nuances prevents both false passes and unnecessary design restrictions.

Buttons and Interactive Controls

Buttons need to meet contrast requirements in two ways: the button text must contrast with the button background (4.5:1 for normal text), and the button itself must be visually identifiable against the page background. WCAG 2.1 SC 1.4.11 (Non-text Contrast) requires a minimum 3:1 contrast ratio for the button's boundary or fill against its surroundings. This means a light gray button on a white background may fail even if the button text is black.

Links Within Text

Links embedded in body text face a unique challenge: they need to be distinguishable from surrounding text and contrast with the background. If your links are styled only with color (no underline), WCAG requires a 3:1 contrast ratio between the link color and the surrounding text color, plus 4.5:1 against the background. The simplest solution? Always underline links in body text — it removes the color-only dependency entirely.

Icons and Graphics

Icons that convey information (not purely decorative) need 3:1 contrast against their background per SC 1.4.11. This includes status icons, navigation icons, social media icons, and chart elements. Decorative icons that duplicate adjacent text (like a search icon next to the word "Search") are exempt, but err on the side of meeting contrast anyway — users scan visually, and clear icons improve usability for everyone.

Placeholder Text

This is one of the most commonly failed contrast checks on the web. Placeholder text in form fields is often styled in light gray (#999 or similar) that fails the 4.5:1 requirement. The argument that "it's just a hint" doesn't hold — if users are expected to read it, it needs adequate contrast. Better yet, use visible labels above inputs rather than relying on placeholder text for critical information.

Disabled States

WCAG 2.2 explicitly exempts "inactive user interface components" from contrast requirements. This means disabled buttons, grayed-out options, and inactive form fields don't need to meet 4.5:1 or 3:1 ratios. However, disabled states should still be perceptible — users need to understand the element exists but isn't currently interactive. A contrast ratio of roughly 2:1 to 3:1 typically communicates "disabled" without being invisible.

Focus Indicators

WCAG 2.2 introduced SC 2.4.13 (Focus Appearance), requiring focus indicators to have a minimum area and contrast. The focus indicator must have at least a 3:1 contrast ratio against the unfocused state and against adjacent colors. Browser default focus rings usually satisfy this, but custom focus styles (which many designs implement) need careful testing. Use Hue's contrast checker to verify your focus ring color against both the element and page backgrounds.

14. Color Blindness Simulation

Testing your designs with color blindness simulators is one of the most impactful accessibility practices you can adopt. Simulation tools transform your screen to show approximately what users with different types of color vision deficiency (CVD) see, revealing problems that pure contrast ratios can miss.

Types of Color Vision Deficiency

There are three main categories of color blindness, each affecting different cone cells in the retina:

Simulation Tools

Chrome DevTools has built-in vision deficiency emulation. Open DevTools → press Ctrl+Shift+P → type "Rendering" → scroll to "Emulate vision deficiencies" and select from protanopia, deuteranopia, tritanopia, achromatopsia, or blurred vision. This is the fastest way to test because you can see your live site through each filter without any installation.

Sim Daltonism (macOS/iOS) is a dedicated color blindness simulator that floats a filter window over your entire screen. Drag it over any application — Figma, your browser, Sketch — and see through different CVD types in real time. It's particularly useful during design work because you can keep it open alongside your design tool.

Stark is a premium accessibility plugin for Figma, Sketch, and Adobe XD that includes contrast checking, color blindness simulation, and focus order visualization all in one tool. If accessibility is a regular part of your workflow (it should be), Stark pays for itself in time saved.

Firefox Accessibility Inspector also includes a simulation panel. Right-click → Inspect → Accessibility tab → "Simulate" dropdown. Firefox's accessibility tools are underrated and worth exploring if you develop cross-browser.

What to Look For

• Status indicators: Can you still distinguish success (green) from error (red) in protanopia/deuteranopia mode?
• Charts and graphs: Are all data series distinguishable through each CVD type?
• Navigation: Can you identify the active/selected state without relying on color alone?
• Form validation: Are error fields identifiable without red color — through icons, borders, text?
• Links: Are links still distinguishable from body text through each simulation?

15. Contrast in Dark Mode

Dark mode introduces unique contrast challenges that light mode designers don't face. The same accent color that passes WCAG AA on a white background may fail on a dark gray one — and the perceptual rules change when the majority of the viewport is dark rather than light.

Avoid Pure Black Backgrounds

Pure black (#000000) with pure white (#FFFFFF) text creates a 21:1 contrast ratio — the maximum possible. While that sounds ideal, it actually causes problems. The extreme luminance difference creates a "halation" effect where white text appears to bleed or glow against black, particularly for users with astigmatism (roughly 50% of the population). Use dark grays (#0a0a0b to #1a1a1a) and off-white text (#e8e8ed to #f0f0f0) for a contrast ratio around 15:1 to 17:1 — still far above WCAG requirements but much more comfortable for extended reading.

Adjust Accent Colors for Dark Backgrounds

Saturated colors that work perfectly on white backgrounds often fail on dark ones. A rich blue (#2563EB) on white gives 4.6:1 — just passing AA. But the same blue on #1a1a1a gives only 3.8:1 — failing for normal text. The fix: use lighter, slightly desaturated tints for dark mode. Map #2563EB to #60A5FA and check again. Build both light and dark variants into your color palette from the start.

Elevation and Surface Hierarchy

In light mode, elevation is communicated through shadows (higher elements cast larger shadows). In dark mode, shadows are invisible against dark backgrounds. Instead, use progressively lighter surface colors: a base of #0a0a0b, cards at #111113, modals at #1a1a1c, and tooltips at #252529. Each level needs enough contrast with adjacent levels to be perceivable (a minimum of 1.5:1 between adjacent surfaces is a good starting point), while text on each surface must still meet 4.5:1.

Testing Dark Mode Specifically

Don't assume that if your light mode passes accessibility tests, your dark mode will too. Test every color combination in both modes. Pay extra attention to: muted/secondary text colors (they often drop below 4.5:1 in dark mode), colored badges and tags on dark surfaces, hover states (a subtle lightening on hover may not be perceptible enough), and border colors that separate dark surfaces from one another.

16. Legal Requirements

Web accessibility isn't just a best practice — it's a legal obligation in most developed nations. Color contrast is one of the most commonly cited violations in accessibility lawsuits because it's objectively measurable and affects a massive user base. Understanding the legal landscape helps you prioritize accessibility investment and communicate its importance to stakeholders.

United States: ADA & Section 508

The Americans with Disabilities Act (ADA) has been interpreted by courts to cover websites and digital services, even though it was written before the web existed. Over 4,600 digital accessibility lawsuits were filed in 2023 alone, targeting everything from retail sites to mobile apps. Section 508 of the Rehabilitation Act specifically requires federal agencies and their contractors to meet WCAG 2.0 Level AA standards (with WCAG 2.2 adoption expected). Settlements regularly reach six and seven figures, making compliance far cheaper than litigation.

European Union: European Accessibility Act (EAA)

The EAA, effective June 2025, requires digital products and services sold in the EU to meet EN 301 549 standards (which incorporate WCAG 2.1 AA). This applies to e-commerce, banking, transport, and telecommunications — essentially any business with EU customers. Non-compliance carries fines determined by individual member states, and the directive covers both public and private sector organizations.

Australia: Disability Discrimination Act (DDA)

Australia's DDA makes it unlawful to discriminate against people with disabilities in the provision of goods and services, which courts have confirmed includes websites. The Australian Human Rights Commission references WCAG 2.0 as the benchmark. The landmark Maguire v SOCOG case (2000) established that inaccessible websites violate the DDA — one of the world's earliest web accessibility rulings. Australian businesses targeting domestic users should treat WCAG AA compliance as a legal baseline.

Canada, UK, and Beyond

Canada's Accessible Canada Act (2019) and provincial legislation like AODA (Ontario) require WCAG compliance for public and large private sector organizations. The UK Equality Act 2010 and Public Sector Bodies Accessibility Regulations 2018 mandate WCAG 2.1 AA for public sector websites. Japan, South Korea, Israel, and India all have similar frameworks. The trend is clear: accessibility legislation is expanding globally, and WCAG compliance is the universal benchmark.