Contrast Checker
Test text and background colors against WCAG AA and AAA. Pick HEX values, read the ratio, and adjust until normal and large text pass.
Live Contrast Checker
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Contrast Ratio
21.00:1
Normal Text
Large Text (18pt+)
Why contrast matters
Contrast is the luminance gap between foreground and background. Light gray on white may annoy someone with sharp vision; for low vision or bright outdoor screens, it can make the content unusable.
About WCAG 2.1 Success Criterion 1.4.3 sets the common web thresholds. Meeting them helps people with permanent, temporary, or situational vision limits—and usually makes the UI easier for everyone to scan.
"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect." — Tim Berners-Lee
WCAG AA vs AAA
Ratios run from 1:1 to 21:1. For text contrast, WCAG 2.1 Level AA is the usual product target; AAA is stricter and often reserved for specialized or government content.
- Level AA
- Normal text: at least 4.5:1
- Large text: at least 3:1
- Level AAA
- Normal text: at least 7:1
- Large text: at least 4.5:1
This checker reports all four checks so you can see whether a pair clears AA, AAA, or neither.
How to use this tool
- Set text and background with the color pickers or by pasting HEX codes.
- Read the preview for normal and large sample text.
- Check the ratio and pass/fail rows for AA and AAA.
- Swap colors if you need to flip foreground and background quickly.
- Nudge lightness on the failing color until you clear at least AA for the text size you ship.
Frequently asked questions
What is a contrast ratio?
It measures the luminance difference between two colors, written like 4.5:1. Higher means stronger separation. The scale runs from 1:1 (identical) to 21:1 (black on white).
Why does large text allow a lower ratio?
Bigger, heavier type is easier to read, so WCAG allows 3:1 for large text at AA instead of 4.5:1. Large text means about 18pt/24px or larger, or 14pt/18.66px bold.
Is failing WCAG illegal?
WCAG itself is a standard, not a criminal code. Many regions still expect public sites and some businesses to be accessible (for example ADA-related cases in the US). Meeting AA is a practical baseline even when legal exposure is unclear.
What about text on images or gradients?
The text must clear contrast against every part of the background it sits on. Test light and dark spots, or put a solid/semi-opaque plate behind the text so the ratio stays stable.
Does this apply outside the web?
WCAG targets web content, but the same ratios are a solid default for apps and many print layouts when readability matters.
Related tools
Related tools
Related Color and Design Tools
Color Harmony Visualizer
Explore and understand color harmonies with our interactive color wheel. Create beautiful color combinations using proven color theory principles.
Color Naming Tool - Give Names to Hex Codes
Find meaningful names for hex color codes using our comprehensive database of web colors, creative names, and descriptive color terminology for designers and developers.
Color Palette Generator
Generate harmonious color palettes from a base color. Create analogous, complementary, triadic, tetradic, shade, and tint schemes for your design projects. Instantly copy HEX codes.
Interactive Color Picker (HEX, RGB, HSL)
An interactive color picker tool to select, convert, and copy colors in HEX, RGB, and HSL formats. Perfect for designers, developers, and artists. Explore color theory, conversion formulas, and best practices.
Color Temperature Calculator
Calculate and convert color temperature (Kelvin) to RGB and HEX values. Perfect for photographers, designers, and lighting professionals working with white balance and color grading.
CSS Border Style Previewer
Create and preview CSS border styles with our interactive tool. Customize border width, style, color, and radius. Perfect for web designers and developers looking to craft perfect borders.
CSS Box Shadow Generator - Create Beautiful Shadows
Create and customize CSS box shadows with our interactive generator. Preview and copy the code instantly.
CSS Clip Path Generator - Create Custom Shapes & Clipping Paths
Generate CSS clip-path properties for custom shapes. Create circles, polygons, and complex paths with visual editing tools for modern web design.
CSS Gradient Animation Previewer - Animated Gradient Generator
Create stunning animated CSS gradients with live preview. Generate smooth color transitions, pulsing effects, and rotating gradients with customizable timing and easing.
Dark Mode Palette Builder
Create a consistent and accessible dark mode color palette from your existing brand colors. Our tool helps you adjust hue, saturation, and lightness to build a beautiful and readable dark theme.