Color Converter
Convert CSS colors between hex, RGB, HSL, OKLCH, and Lab formats.
Share
The inputted text is too long to include in a share link.
Color Contrast Checker
Check foreground and background colors against WCAG contrast ratios for normal and large text.
Readable text starts with enough contrast between the foreground and background.
Contrast ratio
Passes WCAG AA and AAA for normal text.
AA normal
Pass
Needs 4.5:1
AAA normal
Pass
Needs 7:1
AA large
Pass
Needs 3:1
AAA large
Pass
Needs 4.5:1
Suggested text color
How to use this color contrast checker
Use this checker before shipping text colors in a website, product UI, design system, email template, or brand asset where readability matters.
- Enter a text color and background color as hex, RGB, HSL, OKLCH, Lab, or a CSS color name.
- Choose whether you are checking normal text or large text.
- Review the contrast ratio and WCAG AA or AAA pass states.
- Apply the suggested text color when you need a quick accessible fallback.
Color Contrast Checker features
- Check foreground and background colors against WCAG contrast thresholds.
- Accept hex, RGB, HSL, OKLCH, Lab, and CSS color names.
- Use text fields or color pickers for foreground and background colors.
- Switch between normal text and large text requirements.
- Preview readable sample text with the selected colors.
- See AA and AAA pass or fail badges for the selected text size.
- Generate an accessible suggested text color when the pair needs help.
- Apply the suggested color directly to the checker.
WCAG contrast targets
WCAG contrast checks compare the relative luminance of text and its background. Normal text needs at least 4.5:1 for AA and 7:1 for AAA. Large text needs at least 3:1 for AA and 4.5:1 for AAA.
These targets are useful for designers choosing palette combinations, developers reviewing CSS, marketers checking campaign pages, and teams maintaining reusable components. A color pair that looks acceptable on one monitor can still fail for users with low vision, glare, older displays, or browser zoom.
When a brand color fails, start by changing the text color or the background behind the text instead of shrinking the text or relying on weight alone. Larger and bolder type can help, but body copy, button labels, form labels, and navigation usually need normal-text contrast.
How the contrast ratio is calculated
c_{linear} = \begin{cases} \frac{c_{srgb}}{12.92}, & c_{srgb} \le 0.04045 \\ \left(\frac{c_{srgb}+0.055}{1.055}\right)^{2.4}, & c_{srgb} > 0.04045 \end{cases}
Each red, green, and blue channel is first normalized from 0-255 to 0-1, then converted to linear light.
L = 0.2126R + 0.7152G + 0.0722B
The green channel carries the most weight because human vision is more sensitive to green light.
\operatorname{Contrast} = \frac{L_{lighter} + 0.05}{L_{darker} + 0.05}
The resulting ratio is checked against 3:1, 4.5:1, and 7:1 WCAG text contrast thresholds.
The checker parses the colors in your browser, converts sRGB channels to linear light, calculates relative luminance, and divides the lighter luminance by the darker luminance with the WCAG contrast adjustment.
The suggested fallback chooses a readable foreground option for the current background. It is meant as a practical rescue color, not a full palette generator, so final visual decisions should still fit the surrounding interface and brand system.
The formula, 4.5:1 minimum, and large-text rules follow the W3C Web Accessibility Initiative's WCAG contrast technique. The 7:1 enhanced threshold follows its guidance for Contrast (Enhanced).
Color contrast checker FAQ
Does this upload my colors?
No. Color parsing and contrast calculations happen in your browser.
What counts as large text?
WCAG treats large text as 18pt or larger, or 14pt or larger when bold.
Should icons and UI borders use the same thresholds?
Text contrast thresholds are separate from non-text contrast requirements. This checker is focused on foreground text against a background.
Built and maintained by utilkit. Found an issue? Send corrections to contact@utilkit.com