𝗪𝗖𝗔𝗚 𝗖𝗼𝗹𝗼𝗿 𝗖𝗼𝗻𝘁𝗿𝗮𝘀𝘁 𝗥𝗲𝗳𝗲𝗿𝗲𝗻𝗰𝗲

𝗪𝗖𝗔𝗚 𝗖𝗼𝗹𝗼𝗿 𝗖𝗼𝗻𝘁𝗿𝗮𝘀𝘁 𝗥𝗲𝗳𝗲𝗿𝗲𝗻𝗰𝗲

Color contrast fails are common. You fix them by knowing the numbers.

Use these contrast ratios:

• Normal text: 4.5:1 (AA), 7:1 (AAA)
• Large text: 3:1 (AA), 4.5:1 (AAA)
• UI components: 3:1 (AA)
• Decorative elements: Exempt

Large text means 24px or 18.67px bold.

Common examples:

• Black on white: 21:1
• Light grey #999 on white: 2.85:1. This fails.
• Google blue #1a73e8 on white: 4.66:1. This passes AA.

Use these tools to check your work:

• Figma contrast indicator
• Chrome DevTools Accessibility panel
• axe or WAVE browser extensions

Laws in USA, EU, UK, and Australia require Level AA.

Design to WCAG 2.1 AA for all text. Aim for AAA on body text.

Source: https://dev.to/snappy_tools/wcag-color-contrast-a-developers-reference-guide-459a