Who this helps
- Designers choosing text colors
- Developers checking light and dark themes
Developer Utility
Color Contrast Checker
Calculate the contrast ratio between text and background colors and verify whether the combination passes WCAG AA and AAA accessibility standards.
Contrast Ratio Calculation
Calculates the luminance difference between text and background colors and displays the exact contrast ratio.
WCAG Compliance Check
Verify AA and AAA accessibility compliance for both normal and large text.
Live Preview
Instantly preview how the selected color combination appears in a real interface.
Color Input
Enter text and background colors using HEX codes or select them with the color picker.
Preview
Color Contrast Checker
This sample text helps visualize how text appears on a background in a real interface. Useful for checking content areas, buttons, cards, banners, and dark mode color schemes.
Check Result
Review the calculated contrast ratio and WCAG accessibility compliance.
Contrast Ratio
-
Enter colors and click Check Contrast.
Normal Text AA
4.5:1 or higher
Waiting
Normal Text AAA
7:1 or higher
Waiting
Large Text AA
3:1 or higher
Waiting
Large Text AAA
4.5:1 or higher
Waiting
The accessibility report will appear here.
Contrast Standard Comparison
Different accessibility requirements apply depending on text size and compliance level.
Normal Text
Body text, labels, menus, and descriptions generally require at least a 4.5:1 contrast ratio.
Large Text
Large headings and bold text can meet AA requirements with a lower 3:1 ratio.
UI Components
Check readability when selecting colors for buttons, badges, cards, forms, and other interface elements.
Check text contrast with colors you can reproduce
Compare a foreground and background HEX color, then read separate WCAG AA and AAA results for normal and large text. Use this when checking body copy, labels or text on buttons.
When to use this tool
- Compare a gray label with its actual background.
- Check both foreground and background assignments using Swap.
From input to a checked result
- 1
Enter two opaque 3- or 6-digit HEX colors, or use the color pickers.
- 2
Run the contrast check.
- 3
Read the normal-text or large-text result appropriate to the real font.
- 4
After editing a HEX value, check again before copying the report.
Black on white
- Input
- Text: #000000 Background: #ffffff
- Result
- 21.00:1; all four text contrast checks pass
Swapping the two colors produces the same ratio.
Gray close to the normal AA boundary
- Input
- Text: #777777 Background: #ffffff
- Result
- 4.48:1; normal AA fails, large AA passes
The unrounded value is about 4.4781. Passing normal AA requires at least 4.5; the displayed rounding does not determine the verdict.
How it works
The browser linearizes sRGB channels, calculates relative luminance, and divides the lighter luminance plus 0.05 by the darker plus 0.05. Normal-text AA/AAA thresholds are 4.5/7; large-text thresholds are 3/4.5. Display uses two decimal places, while pass/fail uses the unrounded ratio.
Limitations
- Only opaque HEX colors are accepted; alpha, gradients and images are not sampled.
- The tool does not detect the actual font size or weight.
- Passing text contrast does not assess keyboard operation, focus, image alternatives or overall accessibility.
Your data
Color values are calculated in browser memory without an upload or saved history. Copy exports the checked colors, ratio and verdicts.
References
Related tools
- CSS Gradient Generator
Build a background, then check colors beneath the text.
- CSS Clamp Generator
Plan responsive text sizes.
Frequently asked questions
What counts as large text?
WCAG describes at least 18pt regular or 14pt bold text, approximately 24 CSS px or 18.67 CSS px bold. Check the real font size and weight.
Can I enter a transparent color?
No. Determine the final opaque color after compositing it with the background, then enter that HEX value.
Why did the report disappear after editing?
A typed color change invalidates the old result. Run the check again so the copied report matches the current colors.