Checker.Free

Color Contrast Checker & Accessibility Workspace

Test color combinations for WCAG 2.1 AA & AAA compliance in real time. Calculate ratios, preview components, explore brand palettes, audit batch pairs, and auto-fix failing contrast.

Lightness (L) 26%
Opacity (Alpha) 100%
Recent & Swatches
Lightness (L) 97%
Opacity (Alpha) 100%
Recent & Swatches
Ratio 7.42 : 1
EXCELLENT CONTRAST Quality Score: 100 / 100 APCA Est.: Lc 82.4

Meets Enhanced WCAG AAA standards for all text & UI elements.

Best For: Body Text Headings Buttons UI Icons Form Fields
Normal Text (<18pt / 24px)
Level AA (4.5:1 min): PASS
Level AAA (7.0:1 min): PASS

Body copy, paragraphs, table rows, and standard captions.

Large Text (≥18pt or ≥14pt bold)
Level AA (3.0:1 min): PASS
Level AAA (4.5:1 min): PASS

Headings H1–H3, banner text, and large bold elements.

UI Components & Icons
Level AA (3.0:1 min): PASS
Focus & Input Borders: PASS

Visual information required to identify UI boundaries, states & icons.

Interactive Typography

The quick brown fox jumps over the lazy dog.

Accessible, legible, and visually balanced user interfaces.

Color contrast is the difference in perceived luminance between text or interactive components and their background. Good contrast ensures that people with varying visual acuity can comfortably consume digital content.

Interactive UI Elements
Interactive Hyperlink → Live Badge
const theme = { primary: '#0F766E', bg: '#F0FDFA', ratio: 7.42, wcag: 'AAA' };
System Status: Current contrast settings pass the checks represented in this preview.

Typography & Readability

Live Controls

Understanding Color Contrast & Relative Luminance

What Is Color Contrast?

Color contrast is the visual difference in perceived brightness (relative luminance) between two overlapping surfaces—most commonly foreground content (text, icons, borders) and its underlying background canvas. When contrast is high, glyph shapes and graphical boundaries are sharp, distinct, and effortless to read. When contrast is inadequate, letterforms blur into the background, forcing users to squint, experience eye fatigue, or fail to perceive critical interface information entirely.

In digital product accessibility, contrast is not a matter of subjective aesthetics; it is a foundational usability requirement. Millions of users navigate websites under varying visual conditions, including low-contrast vision loss, age-related macular changes, color vision deficiencies (CVD), or environmental barriers like bright sunlight on a mobile display.

What Is a Contrast Ratio?

The Web Content Accessibility Guidelines (WCAG) define contrast as a numerical ratio expressed on a standardized scale from 1:1 (identical colors, zero luminance contrast) up to 21:1 (maximum possible luminance separation between pure #000000 black and #FFFFFF white).

Official WCAG Contrast Formula
Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)

Where L1 is the relative luminance of the lighter color (0.0 to 1.0) and L2 is the relative luminance of the darker color. The constant offset (0.05) compensates for ambient flare on physical displays.

How Does a Color Contrast Calculator Work?

Calculating a contrast ratio requires converting human color perception into a standardized photometric value:

  1. Parse Color Formats: Input HEX, RGB, or HSL strings are parsed into 8-bit red, green, and blue channel integers (0–255).
  2. Linearize sRGB Channels: Non-linear gamma-encoded channel values are divided by 255 and converted to linear color space using the standard piecewise sRGB transfer function.
  3. Calculate Relative Luminance: Channels are weighted by human spectral sensitivity: L = 0.2126*R + 0.7152*G + 0.0722*B.
  4. Compute Luminance Ratio: The lighter luminance is divided by the darker luminance with ambient flare offsets.
  5. Evaluate WCAG Benchmarks: The calculated quotient is compared directly against 4.5:1, 3:1, and 7:1 thresholds without rounding up failures.

What Is Relative Luminance?

Relative luminance (L) is the photometric brightness of any color normalized on a scale from 0.0 (deepest black) to 1.0 (brightest white). Crucially, the human visual system does not perceive all light wavelengths with equal intensity.

Human retinal cones are overwhelmingly sensitive to green wavelengths (71.52% of luminance contribution), moderately sensitive to red (21.26%), and least sensitive to blue (7.22%). This explains why pure yellow (#FFFF00) appears intensely bright, while pure saturated navy blue (#0000FF) appears visually dark despite both having maximal channel saturation.

Chromatic distance (hue difference) is not luminance contrast. Two vividly different colors can have identical relative luminance and fail readability checks entirely.

WCAG Conformance Levels & Success Criteria

Level AA: 4.5:1 SC 1.4.3

Normal Text (< 18pt / 24px)

Under WCAG 2.1 and 2.2 Success Criterion 1.4.3 (Contrast Minimum), regular body copy, input text, table contents, and navigation links must maintain at least a 4.5:1 contrast ratio against their background surface.

This baseline compensates for moderate visual acuity loss (approx 20/40 vision equivalent) without requiring assistive magnification.

Level AA: 3.0:1 SC 1.4.3 / 1.4.11

Large Text & Non-Text UI

The 3.0:1 threshold applies in two distinct scenarios: large-scale typography (≥18pt / 24px regular, or ≥14pt / ~18.66px bold) and Non-Text visual information (SC 1.4.11) required to identify user interface components, states, and meaningful graphical objects.

Thicker stroke widths and larger glyph surface areas make visual perception easier, permitting a lower luminance separation.

Level AAA: 7.0:1 SC 1.4.6

Enhanced Contrast (AAA)

WCAG Success Criterion 1.4.6 requires an enhanced 7.0:1 ratio for normal text and 4.5:1 for large text. While not legally mandated for all websites, AAA is the gold standard for long-form reading, government services, and healthcare portals.

Provides optimal readability for users with severe visual acuity loss (~20/80 vision) without screen zoom.

Text Contrast vs. UI Component Contrast Matrix

WCAG 2.1 & 2.2 Standard Mapping
Element Category WCAG Criterion Level AA Target Level AAA Target Practical Application
Body Copy & Paragraphs SC 1.4.3 4.5:1 min 7.0:1 min Articles, product descriptions, modal copy, form labels
Headings & Large Bold Text SC 1.4.3 3.0:1 min 4.5:1 min H1–H3 page titles (≥24px regular or ≥18.66px bold)
Form Input Boundaries SC 1.4.11 3.0:1 min N/A (3.0:1 baseline) Visual boundary required to identify input location against canvas
Interactive State Indicators SC 1.4.11 3.0:1 min N/A (3.0:1 baseline) Checkbox checkmarks, selected radio dots, active tab indicator bars
Keyboard Focus Indicators SC 1.4.11 / 2.4.13 3.0:1 (SC 1.4.11) SC 2.4.13 (AAA) Visible focus ring contrasted against background & unfocused state
Meaningful Data Visualizations SC 1.4.11 3.0:1 min N/A (3.0:1 baseline) Graphical information essential to understanding chart data

Interactive UI Elements & State Accessibility

Button Accessibility & State Contrast

Buttons require evaluating multiple overlapping contrast relationships simultaneously:

  • Text-to-Fill Contrast: Button label text must achieve at least 4.5:1 against the button's background fill color.
  • Boundary Identification: If the button lacks an enclosing fill, its border stroke must achieve 3:1 against the surrounding surface if the border is necessary to identify the interactive control.
  • Hover & Active States: Hover and pressed states must remain clearly discernible without dipping below required text contrast thresholds.

Hyperlink Contrast & Non-Color Cues

Hyperlinks embedded within body paragraphs present a specific accessibility consideration under WCAG SC 1.4.1 (Use of Color) and SC 1.4.3:

  • Background Separation: Link text must meet at least 4.5:1 contrast against the background surface.
  • Color Distinction Technique: When color is the only visual cue distinguishing an inline link from surrounding text, a 3:1 contrast difference satisfies the relevant distinction requirement, alongside an additional visual cue on hover and focus.
  • Best Practice: Retaining persistent underlines (text-decoration: underline) on inline links provides an immediate non-color visual identifier for all users.

Focus Indicators & Input Boundaries

Keyboard users rely on visible focus outlines to navigate digital interfaces without a mouse. WCAG criteria govern focus visibility:

  • • Under SC 1.4.11, visual information identifying component state (such as focus outlines) requires at least a 3:1 contrast ratio against adjacent colors.
  • • WCAG 2.2 SC 2.4.13 (Level AAA) defines advanced focus appearance criteria including indicator area size and contrast change across focused and unfocused states.
  • • Never suppress browser focus styling using outline: none without supplying an explicit, high-contrast custom focus indicator.

Disabled, Readonly & Placeholder States

Understanding WCAG exceptions prevents common misconceptions during audits:

  • • Disabled Elements: Inactive buttons and disabled inputs are generally exempt from contrast minimums under SC 1.4.3 and SC 1.4.11, though extreme opacity loss can cause users to overlook the control entirely.
  • • Readonly Inputs: Readonly fields containing critical user data are not exempt and must satisfy 4.5:1 text contrast.
  • • Placeholder Text: Placeholder text used to convey information should remain sufficiently legible and should never be used as a substitute for a proper form label.

Accessible Brand Palettes & Design Tokens

Building an Accessible Brand Palette

A common branding mistake is assuming every primary brand color must serve as body text. In reality, brand colors frequently have medium lightness (such as bright cyan, vivid orange, or lime green) which fails 4.5:1 against white and 4.5:1 against black.

The solution is role-based color assignment. Reserve medium-luminance brand hues for decorative accents, badges, or large graphic illustrations, while generating calibrated dark shades (700–900) for text and ultra-light tints (50–100) for surface containers using our built-in Brand Palette Explorer.

Semantic CSS & Tailwind Design Tokens

Enterprise design systems maintain accessibility by structuring color palettes into semantic design tokens rather than raw HEX codes:

--color-text-primary: #0F766E; /* 7.42:1 on surface */
--color-text-muted: #4B5563; /* 4.65:1 on surface */
--color-surface-card: #F0FDFA;
--color-border-interactive: #0F766E; /* 3.1:1 on canvas */

Export ready-to-use variables directly from the CSS & Design Tokens tab.

Contrast Over Gradients, Transparency, and Photography

Multi-Stop Gradients

Gradients transition through multiple luminance levels. Auditing an average ratio is insufficient; you must audit the worst-case point where the text crosses the lightest or darkest gradient stop to ensure no letterforms disappear.

Alpha Transparency Blending

Semi-transparent colors composite with their underlying surface via alpha channel interpolation: C = Alpha*Fg + (1 - Alpha)*Bg. Always calculate contrast against the final composited pixel color.

Text Over Photos & Hero Scrims

Photographic backgrounds have high spatial frequency and unpredictable highlights. Always introduce a solid card container, semi-opaque scrim, or CSS backdrop-filter: blur() overlay beneath text.

APCA & Color Vision Deficiency (CVD)

What Is APCA (Advanced Perceptual Contrast)?

The Advanced Perceptual Contrast Algorithm (APCA) is a modern contrast calculation model created as part of research for the draft WCAG 3 track. Unlike the WCAG 2.x ratio formula (which treats dark-on-light and light-on-dark symmetrically), APCA accounts for spatial frequency, font weight, font size, and human visual non-linearities, yielding a signed lightness contrast score (Lc).

Conformance Distinction: While our workspace provides real-time APCA estimates for design insight, APCA is not an official replacement for WCAG 2.1 or WCAG 2.2. WCAG 2.2 remains the official W3C Recommendation, and relative luminance contrast ratios (4.5:1, 3:1, 7:1) remain the required compliance benchmark.

Contrast vs. Color Blindness (CVD)

Color blindness affects approximately 1 in 12 men (8%) and 1 in 200 women worldwide. It is crucial to understand that luminance contrast and color discrimination are distinct visual phenomena:

  • • Protanopia & Deuteranopia: Red-green cone deficiencies where red and green hues collapse into similar yellow/brown tones.
  • • Tritanopia: Blue-yellow deficiency where blue and yellow hues are confused.
  • • Achromatopsia: Complete absence of color vision, perceiving only luminance shades.

A high luminance contrast ratio guarantees that text is readable even if color hues appear altered under color blindness. Test simulated views in our Color Blindness Lab.

Designer & Developer Accessibility Workflows

UI/UX Designer Contrast Workflow

  1. Establish Canvas & Text Pairs: Pick base canvas tokens and verify primary body text achieves at least 4.5:1 (or 7:1 for AAA targets).
  2. Verify Component States: Audit visual information required to identify button fills, input borders, and focus indicators for 3:1 non-text contrast under SC 1.4.11.
  3. Preview Typography Settings: Use the Live UI Sandbox to test letter-spacing and font weight variations.
  4. Simulate Color Blindness: Check CVD renderings to ensure alert states (red/green) include distinct icons and labels.
  5. Document Semantic Tokens: Hand off semantic token names to development rather than hardcoded HEX values.

Front-End Developer Implementation Workflow

  1. Implement CSS Custom Properties: Copy generated design tokens from the workspace into your global stylesheet.
  2. Audit High-Volume Color Combinations: Paste all token pairs into the Batch Pair Auditor to verify compliance in bulk.
  3. Configure Explicit Focus Outlines: Apply outline: 2px solid var(--focus-color); outline-offset: 2px; across interactive elements.
  4. Test Light & Dark Theme Inversion: Validate that dark mode tokens are not simple 1:1 color inversions.
  5. Incorporate Automated CI Audits: Pair unit contrast testing with end-to-end axe-core or Lighthouse scans.

Complete Web Accessibility Color Contrast Checklist

17 Key Conformance Checks
Normal text (<18pt) achieves ≥ 4.5:1 ratio against canvas
Large text (≥18pt or ≥14pt bold) achieves ≥ 3.0:1 ratio
Input boundaries necessary to identify fields meet ≥ 3.0:1 contrast
Visible focus indicators have sufficient contrast & meet applicable SC 1.4.11 / 2.4.13
Interactive icons (close, search, menu) achieve ≥ 3.0:1 ratio
Inline links have underlines or ≥ 3.0:1 color separation
Form error text and alert banners achieve ≥ 4.5:1 contrast
Form inputs have persistent high-contrast text labels
Color is not the sole indicator for error states or active tabs
Light mode and Dark mode are audited independently
Gradients are audited at their worst-case lowest contrast point
Text over images has protective scrims or solid card backings
Visual information required to identify meaningful chart elements & states satisfies SC 1.4.11
Palettes tested under Protanopia, Deuteranopia & Tritanopia
Brand color palette organized into semantic token tiers
Failing scores are not rounded up to claim a false pass
Screen reader labels and keyboard tab order verified in UI

WCAG Contrast Guidelines & FAQ

Frequently Asked Questions

What is the difference between Level AA and Level AAA?

WCAG Level AA is commonly referenced as an accessibility benchmark by organizations and standards worldwide, including Section 508 and EN 301 549. It requires a minimum ratio of 4.5:1 for normal text and 3.0:1 for large text. Level AAA is the enhanced standard requiring 7.0:1 for normal text, designed for maximum clarity in specialized portals.

What qualifies as "Large Text" under WCAG?

Large text is defined as text that is at least 18 points (24 CSS pixels) in size, or at least 14 points (approximately 18.66 CSS pixels) when the text is bold.

Do placeholder texts and disabled buttons need to pass?

Disabled interface elements are generally exempt from WCAG contrast requirements under SC 1.4.3 and SC 1.4.11. Placeholder text used to convey information should remain sufficiently legible and should not be used as a substitute for a proper form label.

What is a color contrast checker?

A color contrast checker is an accessibility tool that calculates the relative luminance contrast ratio between foreground content (such as text, icons, or input borders) and background surfaces. It verifies whether color pairings meet Web Content Accessibility Guidelines (WCAG 2.1 / 2.2) conformance thresholds for readability.

How is the WCAG contrast ratio calculated mathematically?

The WCAG contrast ratio formula is (L1 + 0.05) / (L2 + 0.05), where L1 represents the relative luminance of the lighter color and L2 represents the relative luminance of the darker color. The resulting ratio ranges from 1:1 (identical colors) to 21:1 (pure black on pure white).

What is relative luminance in color accessibility?

Relative luminance is the normalized brightness of any point in a colorspace, defined from 0 for the darkest black to 1 for the lightest white. In standard sRGB, human eye sensitivity weights green most heavily (0.7152), followed by red (0.2126) and blue (0.0722).

What are the core WCAG 2.1 and WCAG 2.2 contrast ratio thresholds?

Under WCAG 2.1 and WCAG 2.2 Level AA: Normal text requires at least 4.5:1 (SC 1.4.3), Large text requires at least 3:1 (SC 1.4.3), and visual information required to identify user interface components and meaningful graphical objects generally requires at least 3:1 against adjacent colors, subject to criteria exceptions (SC 1.4.11). Under Level AAA: Normal text requires 7:1 and Large text requires 4.5:1 (SC 1.4.6).

What is non-text contrast under WCAG Success Criterion 1.4.11?

Non-text contrast requires at least a 3:1 contrast ratio for visual information that is essential for identifying user interface components (such as input boundaries and state indicators) and meaningful graphical objects (such as charts and standalone icons) against adjacent background colors, unless a specific exception applies.

Do keyboard focus indicators need to meet a minimum contrast ratio?

Visible focus indicators should have sufficient contrast to remain clearly distinguishable. Under SC 1.4.11, visual information identifying component state requires at least 3:1 contrast against adjacent colors. Additionally, WCAG 2.2 SC 2.4.13 (Level AAA) specifies enhanced size and contrast requirements between focused and unfocused states.

How should hyperlink contrast be evaluated within body copy?

When color is the only visual cue distinguishing an inline link from surrounding text, a 3:1 contrast difference can satisfy the relevant color-distinction requirement; links must still meet the applicable text-to-background contrast requirements (such as 4.5:1 under SC 1.4.3). Using a persistent underline remains the most reliable practice.

Common Contrast Mistakes

  • Light Gray on White: Using #94A3B8 or #A0AEC0 for secondary copy fails AA with a ~2.5:1 ratio. Use at least #64748B or darker.
  • Thin Font Weights: Using 100/200 ultra-light typography causes severe legibility loss even if the mathematical color ratio passes.
  • Relying on Color Alone: Indicating form errors or links using only red/blue without icons or underlines makes comprehension difficult for color-blind users.
  • Safe Practice: Test both dark and light modes, and verify contrast across our built-in Color Blindness Lab.
Why is gray body text frequently flagged for failing WCAG?

Many modern UI themes use muted grays like #94A3B8 or #A0AEC0 for secondary text on white backgrounds, which yields ratios between 2.2:1 and 2.6:1—substantially failing the 4.5:1 Level AA requirement. Accessible body copy on white generally requires darker grays like #64748B (4.6:1+) or #475569 (7:1+).

What is APCA, and is it part of official WCAG 2.2 conformance?

The Advanced Perceptual Contrast Algorithm (APCA) is an advanced lightness contrast model developed for the draft WCAG 3 research track. It computes perceptual lightness differences (Lc scores) based on font size and weight. However, APCA is not an official WCAG 2.2 conformance standard; the relative luminance ratio formula remains the official compliance benchmark.

Why is color alone insufficient for conveying interactive status or errors?

WCAG Success Criterion 1.4.1 (Use of Color) specifies that color cannot be used as the sole visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. Designers must combine color with icons, text labels, patterns, or underlining so users with color vision deficiencies can understand the state.

How do semi-transparent colors and alpha opacity impact contrast?

Semi-transparent foregrounds blend with their underlying background through alpha compositing. The effective contrast ratio is determined by the final composited RGB value, meaning a color with 50% opacity has lower contrast than the same color at 100% opacity against a light surface.

How do you test color contrast for text placed over gradients or background photos?

Because gradient and photo backgrounds have varying luminance across different coordinates, you must sample the worst-case (lowest contrast) point behind the text glyphs. If the worst-case point fails 4.5:1, designers should add semi-opaque overlays, text scrims, or backdrop filters to guarantee consistent contrast.

Why must dark mode and light mode color pairs be tested independently?

Simply inverting HEX values between light and dark themes often causes contrast failures because human eye sensitivity and sRGB gamma response differ between dark surfaces and bright highlights. Both themes must be audited independently across body text, muted labels, borders, and button states.

Can a website pass all WCAG color contrast checks and still be inaccessible?

Yes. Color contrast is only one facet of web accessibility. A website with flawless contrast can still be inaccessible if it lacks keyboard navigation, accessible names for screen readers, visible focus states, responsive text reflow, sufficient tap target sizes, or text alternatives for non-text media.

Does automatic contrast fixing guarantee ideal visual design?

No. While automated auto-fix algorithms adjust lightness mathematically to reach 4.5:1 or 7:1, design teams must still review visual hierarchy, brand identity, color harmony, and component states to ensure the adjusted color looks balanced and preserves semantic meaning across the UI.

What is the difference between WCAG 2.1, WCAG 2.2, and WCAG 3?

WCAG 2.1 (2018) and WCAG 2.2 (2023 W3C Recommendation) share the exact same core contrast requirements (4.5:1 for normal text, 3:1 for large text and non-text UI). WCAG 2.2 introduced new criteria for focus appearance, draggable movements, and target sizes. WCAG 3 is an in-progress working draft that explores new perceptual scoring models but is not yet a formal standard.

How should design systems manage accessible color tokens across large teams?

Design systems should organize colors into semantic tokens based on role (such as surface-canvas, text-primary, text-muted, border-interactive, and focus-ring) rather than static color names. This ensures every semantic pairing is pre-audited to pass WCAG requirements across both light and dark themes.

Region & Language

Select your preferred language for the interface.