Color Contrast Checker
Compare text and background colors, preview real sizes and find an adjustment that meets your chosen contrast target. Check transparent layers and a batch of candidate colors.
1. Choose your colors
HEX, RGB/RGBA, HSL/HSLA or a browser-supported CSS name. For transparency include alpha, such as #ffffff80 or rgba(0,0,0,0.5). Color pickers keep the current opacity.
2. Choose an adjustment target
Suggestions mix one RGB color toward black or white while keeping its opacity. They find a passing candidate along those two paths, not the globally closest color in every color space. Low opacity can make a target impossible without changing another layer.
3. Check the contrast
Pass/fail uses the unrounded ratio; the display uses two decimals.
A clear heading
Good design makes useful information easy to read. Preview your actual color pair before using it in a project.
Compare several text colors on this background
Up to 30 lines. Each color is tested as the foreground on your current surface and page layers. Batch errors are listed per row.
| Color & sample | Ratio | Selected target | Use |
|---|
Calculations run in your browser using our existing color helpers. This checks a chosen pair and layer model, not whole-page accessibility. Images, gradients, interaction states and surrounding colors need separate review. W3C text contrast guidance · Non-text guidance. No saved input history or processing upload; website ads and analytics follow our privacy information.
Using Color Contrast Checker
Check a foreground color against a surface and its opaque page layer. Use the previews, threshold checks and batch comparisons to choose a more readable pair.
- Enter foreground and surface CSS colors, including alpha when needed, and choose the opaque page color underneath.
- Review unrounded threshold decisions, preview text sizes and choose a 3:1, 4.5:1 or 7:1 suggestion target. Apply a text or surface adjustment when available.
- Compare up to 30 candidate text colors on the current background. Copy CSS variables or save pair/batch JSON with the calculated results.
Example
The default #777777 on white is about 4.48:1, which fails the 4.5:1 normal-text AA threshold. Apply a suggested text change and compare its result. Try transparent layers to see the chosen page color affect the surface and text appearance. Change the page color, then compare the updated ratio and suggestions.
Questions & answers
Which contrast rules are shown?
WCAG 2.2 text thresholds: AA 4.5:1 for normal text and 3:1 for large text; AAA 7:1 for normal and 4.5:1 for large. The 3:1 non-text check is a color-pair threshold for qualifying UI/graphics and their adjacent colors, not a complete evaluation of every component.
What counts as large text?
The preview classifies regular text from 24 CSS pixels, or bold text from 14 points (56/3 CSS pixels), as large. Thin or unusual glyphs may still be difficult to read. The fixed 32-pixel heading is separate from the adjustable body preview.
Why can a displayed 4.50 ratio fail?
The displayed ratio is rounded to two decimals, but pass/fail compares the full calculated value. For example 4.499 does not reach 4.5. Use a margin above a threshold when possible.
How is transparency handled?
The surface is composited on the opaque page color, then the foreground is composited on that surface. The calculation uses unrounded sRGB channel values. Effective HEX labels are rounded to 8-bit RGB for display. It models this layer order only.
Which CSS colors can I enter?
Browser-supported HEX, RGB/RGBA, HSL/HSLA and CSS names. Context-dependent values such as var() or currentColor are rejected. Advanced color syntax may be converted through a browser canvas to sRGB and approximated; use explicit sRGB colors for repeatable results.
Are suggestions the closest possible matching colors?
They search 1,000 steps on two RGB mixing paths toward black and white, preserving opacity as parsed by the browser, then verify a serialized passing candidate. They are not a global perceptual color optimization. Very low opacity can prevent a passing result on these paths.
What does the batch comparison test?
Each nonempty line supplies a candidate foreground, optionally label | color. Up to 30 lines are tested against the current surface/page layers and selected threshold. Invalid rows are reported individually; the JSON includes their errors.
Does passing mean my whole page is accessible?
No. This checks chosen colors and one layer model. Gradients, images, interaction states, actual fonts, surrounding colors, meaning and other accessibility requirements need separate assessment. It does not certify a page or analyze an uploaded screenshot.
Are colors or preview text uploaded?
No processing request or stored input history is used. Parsing and calculations run in your browser with existing color helpers. CSS/report downloads are local; website ads and analytics follow the privacy information.
Related tools
A useful next step for your task.
Images & DesignColor Format Converter ToolConvert CSS colors with transparency, explore gradients and palettes, and compare WCAG text contrast on a chosen background. Local processing with…
Images & DesignImage Color PickerRead original decoded pixels and create reusable color palettes without uploading images. Includes clear instructions, examples and validated…
Images & DesignImage Color ReplacerReplace image colors locally with click-to-pick, tolerance, soft color edges, lightness preservation and connected-area selection. Compare…
Developer & DataFluid Typography BuilderBuild eight responsive text sizes together. Preview their calculated sizes and export reusable CSS variables for your website.
Help improve this tool
Report a problem or suggest an improvement
Describe the issue without pasting private tool input. Feedback goes to our admin inbox.