Color Contrast Tool

APCA™ is the candidate contrast method for WCAG 3, and is currently in public beta. WCAG 3 is still in development and subject to changes prior to adoption.

Repo Link
The quick brown fox jumped over the lazy dog

Text Color

Background Color

INVISIBLE! 😢

APCA Contrast Lc

?

Compatibility with WCAG 2

?

INSPIRED FROM:

Check out Readibility Criterion for latest updates on criteria's pertaining to font size, colors and more on how to ensure best readability for digital mediums like websites.

Use directly from URL

All color formats mentioned above (after removing the # character) are supported to directly land on this page via url. Try these samples:

WCAG 2 Standards reference

AA, Enhanced

SHOULD

  • Lc 15 (W 1.3:1) Minimum for disabled elements (not hidden).
  • Lc 30 (W 1.8:1) Minimum for incidental text such as placeholders.
  • Lc 45 (W 2:1) Minimum for logotypes.

SHALL

  • Lc 60 (W 3:1) Large font only, no body text. Non-text okay.
  • Lc 75 (W 4.5:1) 16px minimum for body text, 12px minimum otherwise
  • Lc 90 (W 7:1) 14px minimum body text, 10px minimum otherwise

AAA, Enhanced

SHOULD

  • Lc 15 (W 1.3:1) Minimum for disabled elements (not hidden).
  • Lc 30 (W 1.8:1) Minimum for incidental text such as placeholders.

SHALL

  • Lc 60 (W 3:1) Minimum for logotypes and essential non-text.
  • Lc 75 (W 4.5:1) Large font only, no body text.
  • Lc 90 (W 7:1) 16px minimum for body text, 12px minimum otherwise

The new, under-development WCAG 3 method using APCA sees great improvements over the current contrast system. Some of the important changes are listed below:

  • The new APCA scoring system, scores accessibility in levels out of 106 & -108 instead of ratios. The higher the number, the higher the contrast. 15 is the minimum for non-text elements, while 75 is the preferred level for body text.
  • The size and weight of text are considered to measure accessibility. Thinner the text, lower the score.
  • If you swap text and background colours, the accessibility result differs; unlike WCAG 2, which yields the same results.
  • Contrast is modelled perceptually, not mathematically. Unlike WCAG 2, the new APCA considers that humans have different perception of contrast and do not perceive it linearly across hue and lightness.

Made with ☕ by Shimanta