Text on Control
⚠️ Button boundaries are not required mandatorily to fulfill these contrast criteria. Learn more about Non-Text Contrast. Better examples might be slider bars and knobs, switches, toggles and other controls that need more graphical cues to work than a text label or icon alone.
Contrast Text on Control
Text ↔︎ Control on Background on White.
Relative Luminance Text: 0.02
4.95:1
AA
42 ■
⚠️ APCA Beta
Contrast Control
Control ↔︎ Background on White.
Relative Luminance Control: 0.27
3.02:1
AA
54 ■
⚠️ APCA Beta

Large text on background

Regular text on background. AA Large applies to text with a font size of at least 24px or larger and regular font weight as well as text which is …

larger than 18.5px and bold.

Contrast Text
Text ↔︎ Background on White.
Relative Luminance Background: 0.93
14.96:1
AAA
98 ■
⚠️ APCA Beta
Text Color
Control Color
Background Color
Copy to URI
AA Large applies to text > 24px or > 18.5px for bold fonts. Learn more: Text Contrast Non-text Contrast (WCAG 2.1)
For APCA font size and weight need to be taken into account, so the little colored dot is not really meaningful: WCAG 3.0 APCA (Working Draft)
Inspired by the GOV.uk contrast checker on glitch, made with CodeSandbox. | GitHub
Made by bruskowski.design