Menu

APCA vs WCAG contrast: which one should you use?
πŸ“°

APCA vs WCAG contrast: which one should you use?

DEV Community: cssΒ·Vadym LiubyvyiΒ·4 days ago
#xgVqJ4Wr
#devtocss#devto#dev#contrast#wcag
Reading 0:00
15s threshold

Designers who check colours sooner or later meet two numbers: the WCAG contrast ratio (4.5:1, 3:1) and an APCA value such as Lc 75. They do not always agree. This page explains how the WCAG 2 formula works, what APCA is and what its status really is, and how Windows high contrast mode relates to both.

The short answer for anyone who has to meet a requirement: laws and standards use the WCAG 2 contrast ratio. This is general information, not legal advice.

The WCAG 2 formula, step by step

WCAG 2.2 defines contrast in two steps, both in its glossary .

1. Relative luminance β€” how bright a colour is, from 0 for the darkest black to 1 for the lightest white. For each sRGB channel:

C_srgb = C_8bit / 255 C = C_srgb / 12.92 if C_srgb <= 0.04045 C = ((C_srgb + 0.055) / 1.055) ^ 2.4 otherwise

L = 0.2126 * R + 0.7152 * G + 0.0722 * B

Enter fullscreen mode

Exit fullscreen mode

The weights show that the eye is far more sensitive to green than to blue.…

Continue reading β€” create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.