Skip to main content
CoolColor Space

WCAG Contrast Checker

Check color contrast for WCAG 2 accessibility compliance, with APCA Lc as extra readability guidance

Foreground (Text)

Background

Preview

The quick brown fox jumps over the lazy dog

Large Text Example

Contrast Ratio

21:1Passes AAA for all text

Normal Text

Regular text (under 18pt or 14pt bold)

AAMin 4.5:1✓
AAAMin 7:1✓

Large Text

18pt and larger, or 14pt bold and larger

AAMin 3:1✓
AAAMin 4.5:1✓

UI Components & Graphics

Icons, input borders, focus outlines and chart lines against the colors next to them (WCAG 1.4.11)

AAMin 3:1✓

APCA contrast (Lc)

APCA is a contrast method in public beta. It is not part of WCAG 2.x, the guidelines accessibility laws refer to, so use the WCAG verdict above for compliance and Lc as extra readability guidance. APCA vs WCAG 2, explained.

Text color
#000000
Background
#FFFFFF

APCA depends on which color is the text. Swapping the two colors changes the Lc, so check again after any swap.

Lc 106.0Dark text on a light backgroundWhy APCA

If the colors were swapped (#FFFFFF text on #000000): Lc -107.9.

APCA levels

  • Lc 90Preferred Body TextThis pairThe preferred level for columns and paragraphs of body text.
  • Lc 75Minimum Body TextThe lowest level for body text, and for any larger text where readability is important.
  • Lc 60Minimum Fluent textText people should read that is not body, column or block text.
  • Lc 45Minimum Large textLarge, heavier text such as headlines; icons with fine detail.
  • Lc 30Minimum Any textNon-content text only: placeholders, disabled text, solid icons.
  • Lc 15Invisibility pointCertain non-text only, such as dividers; below this treat as invisible.

The levels are explained in APCA in a Nutshell. Sizes for every weight are in the font size and weight lookup tables.

Minimum font size at Lc 106.0

  • Weight 30018pxSample text
  • Weight 40014.5pxSample text
  • Weight 70012pxSample text

Samples use Arial or Helvetica, the APCA reference font, at the minimum size and weight in your colors. Sizes are CSS pixels. Many systems have no Arial at weight 300, so that sample may show at 400.

Questions, comments or issues about APCA itself go to the APCA discussion forum on GitHub.

About WCAG

WCAG (Web Content Accessibility Guidelines) defines contrast ratios to ensure text is readable for people with visual impairments.

  • AA - The level most accessibility standards ask for
  • AAA - Enhanced contrast for better accessibility

How this pair looks with color blindness

An approximate simulation. Colors shift in brightness, so the ratio under each preview may differ from the WCAG ratio above; WCAG compliance is judged on the original colors. To check a whole image or your camera, open the Color Blindness Simulator. Text over a photo or a screenshot? Use the Image Contrast Checker.

  • Sample text Aa

    Protanopia

    21.00:1 after simulation

  • Sample text Aa

    Deuteranopia

    21.00:1 after simulation

  • Sample text Aa

    Tritanopia

    21.00:1 after simulation

  • Sample text Aa

    Achromatopsia

    21.00:1 after simulation

Frequently Asked Questions

What is WCAG AA contrast ratio?
WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold). W3C chose 4.5:1 to make up for the contrast loss that usually comes with vision of about 20/40. Icons, input borders and other UI parts need 3:1 against the colors next to them (WCAG 1.4.11).
What is WCAG AAA contrast ratio?
WCAG AAA (enhanced level) requires a contrast ratio of 7:1 for normal text and 4.5:1 for large text. W3C chose 7:1 to make up for the contrast loss that usually comes with vision of about 20/80.
How do I check color contrast for accessibility?
Enter your foreground (text) color and background color in the WCAG Contrast Checker. The tool instantly calculates the contrast ratio and shows whether your colors pass AA and AAA standards. If they fail, it suggests the nearest text or background color of the same hue that passes.
What contrast ratio do I need for my website?
Most websites should meet WCAG AA (4.5:1 for text). Accessibility laws and standards that reference WCAG, such as Section 508 in the US and EN 301 549 in the EU, ask for level AA; AAA (7:1) is a stricter target. Our contrast checker shows pass/fail for both levels simultaneously.
What is APCA and what does Lc mean?
APCA (Accessible Perceptual Contrast Algorithm) is a contrast method in public beta from Myndex Research. Instead of a ratio it gives a signed Lc value: positive for dark text on a light background, negative for light text on a dark one. The result depends on which color is the text: #888888 text on white is Lc 63.1, white text on #888888 is Lc -68.5, while WCAG 2 gives 3.54:1 both ways. In APCA guidance Lc 75 is the minimum for body text and Lc 60 for other text people read; this checker also shows the minimum font size for weights 300, 400 and 700.
APCA vs WCAG 2: which should I use?
Use WCAG 2 for compliance: laws and standards such as Section 508 and EN 301 549 refer to WCAG 2, and APCA is not part of it. Use Lc as extra readability guidance, mostly in dark mode and on mid-tone backgrounds, where the two methods often disagree. For example, #777777 text on black passes WCAG AA at 4.69:1 but is only Lc -30.6, the level APCA gives for placeholders and disabled text. To satisfy both, the fix suggestions on this page can find a color that reaches 4.5:1 and Lc 75 at once.

Sources

  1. W3C (2018, current edition 6 May 2025). Web Content Accessibility Guidelines (WCAG) 2.1: definitions of relative luminance and contrast ratio, success criteria 1.4.3 and 1.4.6. Link
  2. W3C Recommendation (12 December 2024). Web Content Accessibility Guidelines (WCAG) 2.2: success criteria 1.4.3, 1.4.6 and 1.4.11 (non-text contrast, 3:1), unchanged from WCAG 2.1. Link