About this tool
Verify text and interface color combinations against official Web Content Accessibility Guidelines (WCAG 2.1) Level AA and AAA standards with real-time pass/fail ratings.
Color Contrast Checker
Check WCAG 2.1 AA and AAA color contrast ratios for text and UI components to guarantee digital accessibility.
Example
- foreground: #111827
- background: #ffffff
Output
CREATORWaiting
Run the tool to generate output.
When to use this tool
Use Color Contrast Checker during UI design, front-end development, and accessibility audits to ensure digital products meet international legal accessibility standards (ADA / Section 508 / EN 301 549).
Inputs, Formats & Specifications
- Accepted Inputs
- Foreground color (HEX/RGB) and background color (HEX/RGB)
- Output Formats
- Mathematical contrast ratio (1:1 to 21:1), WCAG AA & AAA pass/fail ratings for Normal Text, Large Text, and UI Components
- Supported Standards
- HEX (#RGB, #RRGGBB), RGB
- Browser Limits & Scope
- Calculates contrast between solid color pairs; for text over gradients or photography, test the lowest-contrast section of the background.
How to use this tool
- Enter your text foreground color and background color using HEX codes or the color pickers.
- View the calculated contrast ratio instantly (e.g. 8.5:1) according to WCAG 2.1 standards.
- Check compliance status for WCAG Level AA and Level AAA across Normal Text, Large Text, and Graphical UI Components.
- Use the real-time preview card to evaluate reading comfort across different font weights and sizes.
Examples
Button Text Readability Check
Verify whether white text (#ffffff) on a bright brand blue button (#2563eb) achieves at least 4.5:1 contrast for WCAG AA compliance.
Dark Mode Body Copy Evaluation
Test muted gray body copy (#94a3b8) against a dark background (#0f172a) to ensure senior readers and low-vision users can comfortably read paragraphs.