WCAG Color Contrast Checker
Check foreground/background color contrast ratios against WCAG 2.1 AA and AAA accessibility standards. Use this free online tool directly in your browser.
The quick brown fox
Sample body text — WCAG contrast preview
6.70:1
Good (AA)
AA — Normal text
≥ 4.5:1 (you: 6.70)
AA — Large text
≥ 3:1 (you: 6.70)
AA — UI Components
≥ 3:1 (you: 6.70)
AAA — Normal text
≥ 7:1 (you: 6.70)
AAA — Large text
≥ 4.5:1 (you: 6.70)
Common presets
WCAG 2.1 Reference
What is WCAG Color Contrast Checker?
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background colors to ensure readability for users with low vision or color blindness. The AA standard requires a 4.5:1 ratio for normal text and 3:1 for large text (18pt+ or bold 14pt+). The stricter AAA standard requires 7:1 for normal text. UI components like borders and icons require 3:1. This checker computes the exact contrast ratio between any foreground and background color using the official WCAG 2.1 relative luminance formula and evaluates it against all five WCAG criteria. The live preview shows how your color combination looks for text, body copy, and button labels, giving you an immediate sense of real-world legibility. All calculations happen in the browser with no data transmitted.
How to use
- 1
Paste or enter your data in the WCAG Color Contrast Checker input area.
- 2
Run the conversion, generation, or validation action.
- 3
Copy or download the result for your project workflow.
Common Use Cases
- 1
Verify a brand color on a white background meets WCAG 2.1 AA contrast requirements before launch
- 2
Check button text and background color combinations against accessibility guidelines
- 3
Test icon and border colors against their backgrounds for UI component contrast compliance
- 4
Validate color tokens in a design system to ensure all combinations meet the required contrast level
- 5
Quickly evaluate whether a proposed color change would pass or fail WCAG before updating a design file
Try an Example
Example Input
Foreground: #1d4ed8 / Background: #ffffff
Expected Output
Contrast ratio: 8.59:1 — passes WCAG 2.1 AA and AAA
Frequently Asked Questions
What is WCAG Color Contrast Checker?
WCAG Color Contrast Checker is a free browser-based utility on Bite Size Tools. Check foreground/background color contrast ratios against WCAG 2.1 AA and AAA accessibility standards.
Is WCAG Color Contrast Checker safe to use with sensitive data?
Yes. Tool processing runs in your browser, so your input is not sent to a server by default in this app.
Can I use WCAG Color Contrast Checker for production work?
Yes. You can use the output directly in development and production workflows after validating it with your project requirements.