Accessibility · WCAG 2.1

Color Contrast Checker

Check WCAG contrast ratios, preview text on background pairs, and export token-based color pairs for your design system.

Color Pair

Enter foreground and background colors (HEX), or use the pickers to explore accessible combinations.

Example: #ffffff or #fff

Example: #0f172a

Contrast Ratio –
Normal Text (AA / AAA) –
Large Text (AA / AAA) –
UI & Icons (AA) –

Preview

Adjust the sample text and size to see how your pair behaves in context.

18px (large)

Accessible UI starts with readable contrast.

Foreground: #ffffff Background: #0f172a

Token Pair Export

Generate copy-ready design tokens for your system. Update the token names to match your naming convention.