DevBolt
Processed in your browser. Your data never leaves your device.

How do I check color contrast for accessibility (WCAG)?

Enter a foreground and background color to instantly see the contrast ratio and whether it passes WCAG 2.1 AA and AAA standards for normal text, large text, and UI components. The tool shows pass/fail badges for each level. Everything runs in your browser.

Check dark text on white
Input
Text: #1F2937
Background: #FFFFFF
Output
Contrast ratio: 15.4:1
WCAG AA: Pass (normal + large)
WCAG AAA: Pass (normal + large)
← Back to tools

Color Contrast Checker

Check the contrast ratio between two colors for WCAG 2.1 accessibility compliance. Ensure your text is readable for all users.

Contrast Ratio

14.68:1

Excellent

Live Preview

Large Text (24px bold)

Normal body text at 16px. This is what most of your content will look like. Make sure it's easy to read for all users, including those with visual impairments.

Small text at 14px — captions, footnotes, and secondary content.

WCAG 2.1 Compliance

AANormal text(4.5:1)
✓
AALarge text(3:1)
✓
AAUI components(3:1)
✓
AAANormal text(7:1)
✓
AAALarge text(4.5:1)
✓

Presets

About WCAG Color Contrast

The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure text is readable by people with moderately low vision or color deficiencies.

AA Normal Text requires a contrast ratio of at least 4.5:1. This applies to body text under 18pt (24px) or under 14pt (18.66px) bold.

AA Large Text requires at least 3:1. Large text is defined as 18pt+ (24px+) or 14pt+ (18.66px+) bold.

AAA is the enhanced level — 7:1 for normal text and 4.5:1 for large text. This is recommended for long-form content and critical UI.

UI Components like icons, borders, and form controls require at least 3:1 contrast against adjacent colors (WCAG 2.1 Success Criterion 1.4.11).

The contrast ratio is calculated using the relative luminance of each color. The formula is: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance.

Tips & Best Practices

Pro Tip

WCAG AA requires 4.5:1 for normal text, 3:1 for large text

Large text is defined as 18pt (24px) regular weight or 14pt (18.66px) bold. Logos and decorative text are exempt. For AAA (enhanced) compliance: 7:1 for normal text, 4.5:1 for large text. Meeting AA is legally required in many jurisdictions (ADA, EAA, EN 301 549). AAA is best practice for public-facing content.

Common Pitfall

Contrast ratios don't account for thin font weights

WCAG contrast calculations use luminance values, not font weight. But a 400-weight font at 4.5:1 contrast is more readable than a 300-weight font at the same ratio. Light and thin font weights (100-300) need higher contrast to be legible, especially at small sizes. Use 500+ weight for body text.

Real-World Example

Semi-transparent text has variable contrast

Text with opacity: 0.7 or color: rgba(0,0,0,0.6) has different effective contrast depending on the background behind it. Over a white background it might pass, but over an image it might fail. Calculate contrast against the worst-case background. For text over images, add a solid or gradient overlay.

Security Note

Low contrast can be a dark pattern

Deliberately low-contrast text for unsubscribe links, terms of service links, or opt-out options is a dark pattern that may violate accessibility laws and FTC guidelines. The EU's Digital Services Act explicitly addresses deceptive interface design. Ensure all interactive elements meet minimum contrast requirements.

Frequently Asked Questions

What is WCAG color contrast and why does it matter?
WCAG color contrast is the luminance ratio between foreground text and its background, measured on a scale from 1:1 (no contrast) to 21:1 (maximum, black on white). The Web Content Accessibility Guidelines require minimum contrast ratios so people with low vision or color deficiencies can read content. Level AA requires 4.5:1 for normal text and 3:1 for large text (18px bold or 24px regular). Level AAA requires 7:1 for normal text and 4.5:1 for large text. Meeting these standards is a legal requirement under accessibility laws like the ADA, Section 508, and the European Accessibility Act.
How do I check if my colors meet WCAG accessibility standards?
Enter your foreground (text) color and background color using HEX, RGB, or HSL values in DevBolt's Contrast Checker. The tool calculates the contrast ratio and shows whether the combination passes WCAG 2.1 Level AA and Level AAA for both normal and large text. If a combination fails, try darkening the text or lightening the background until the required ratio is met. The tool displays the exact ratio so you can gauge how close you are. A common accessibility failure is light gray text on white backgrounds. Test all text-background combinations in your design system, including links, buttons, placeholder text, and error messages.
What is the minimum contrast ratio for accessible text?
The minimum contrast ratio under WCAG 2.1 Level AA is 4.5:1 for normal-sized text and 3:1 for large text. For the stricter Level AAA standard, normal text needs 7:1 and large text needs 4.5:1. Non-text elements like form input borders, icons, and graphical objects require at least 3:1 against adjacent colors per WCAG 2.1 Success Criterion 1.4.11. These ratios are calculated using a formula based on relative luminance of the two colors. Pure black on white has the maximum ratio of 21:1. Most accessibility audits reference Level AA thresholds. DevBolt's checker evaluates all levels simultaneously.

Related Inspect Tools

X/

XPath Tester

Test XPath expressions against XML data with real-time evaluation — select elements, filter by attributes, navigate axes, and use XPath functions

▷

SQL Playground

Run SQL queries in your browser with a full SQLite database powered by WebAssembly — practice JOINs, CTEs, window functions, aggregations, and more

JWT

JWT Decoder

Decode and inspect JSON Web Tokens instantly

.*

Regex Tester

Test regular expressions with real-time match highlighting