CSS Color Contrast Checker
Check CSS color contrast ratios instantly against WCAG 2.2 accessibility standards. Test foreground and background colors, preview text readability, evaluate AA and AAA compliance, and copy or download your results.
Foreground Color
Background Color
Contrast Results
Live Preview
The quick brown fox jumps over the lazy dog.
Suggested Accessible Colors
CSS Output
All Developer Tools
Browse free online tools for JSON, HTML, CSS, XML, JavaScript, data conversion, and everyday development tasks.
Try a different search term or select another category.
CSS Color Contrast Checker – Test WCAG AA & AAA
Use Jomatter's CSS Color Contrast Checker to test the contrast ratio between text and background colors. Enter or select two colors to calculate their contrast ratio and see whether the combination meets common WCAG AA and AAA text contrast requirements.
This tool helps designers, developers, accessibility teams, and website owners create readable websites, apps, emails, dashboards, and design systems. Check headings, body text, links, buttons, form labels, and dark-mode interfaces before publishing a design.
Try the Color Contrast Checker
Choose a foreground text color and a background color. The preview and contrast results update as you change either value.
The quick brown fox jumps over the lazy dog. Preview your text against the selected background.
This checker evaluates the selected solid HEX colors using the WCAG relative-luminance contrast formula. It does not audit an entire webpage or evaluate gradients, transparency, images, or all accessibility requirements.
WCAG quick reference: AA generally requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text.
What Is Color Contrast?
Color contrast measures the difference in relative luminance between a foreground color and its background. WCAG expresses contrast as a ratio, such as 4.5:1. Higher ratios generally make text easier to distinguish from its background.
For example, black text on a white background has a contrast ratio of 21:1, while light gray text on white may have a much lower ratio. A contrast checker calculates this relationship and compares it with the applicable WCAG text contrast thresholds.
Color contrast matters for people with low vision, some color vision deficiencies, and anyone reading content in challenging lighting or on a low-quality display. Good contrast also improves everyday readability across websites, applications, and digital documents.
Important: Color contrast is only one part of accessibility. A passing result does not automatically make a page accessible; keyboard navigation, meaningful labels, focus indicators, semantic structure, and other requirements still matter.
How to Use the CSS Color Contrast Checker
Follow these steps to check a text and background color combination before using it in your website or application.
Select a color using the color picker or enter its HEX value, such as #FFFFFF.
Select the background color or enter a valid HEX value, such as #2451D6.
Check how sample text appears with the selected foreground and background colors.
The tool calculates the contrast ratio and displays the result, from 1:1 up to 21:1 for opaque sRGB colors.
Review pass or fail results for normal text and large text. Choose the applicable threshold for your design.
Darken or lighten one of the colors until it meets your target. Then test the actual interface states where the colors will appear.
For the most reliable review, check the exact colors used in your design tokens and test buttons, links, labels, error messages, hover states, focus states, and dark-mode variants separately.
WCAG Color Contrast Requirements
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios for text and certain non-text interface elements. The appropriate threshold depends on the content being evaluated.
| WCAG criterion | Normal text | Large text | UI components and graphics |
|---|---|---|---|
| AA | At least 4.5:1 | At least 3:1 | Generally at least 3:1 for applicable non-text elements |
| AAA | At least 7:1 | At least 4.5:1 | No corresponding general AAA threshold under the text contrast criterion |
WCAG defines large-scale text as at least 18 point regular or 14 point bold, approximately 24 CSS pixels regular or 18.67 CSS pixels bold. The text contrast criterion includes exceptions, so consult the applicable WCAG guidance for special cases such as logos and incidental text.
WCAG 2.2 Success Criterion 1.4.11 generally requires a 3:1 contrast ratio for visual information needed to identify user-interface components and meaningful graphical objects against adjacent colors. This is separate from the text contrast criteria.
How Is the Contrast Ratio Calculated?
WCAG calculates contrast from the relative luminance of two colors. The lighter color's luminance is placed in the numerator and the darker color's luminance in the denominator.
L1 is the relative luminance of the lighter color, and L2 is the relative luminance of the darker color. Relative luminance is calculated from the linearized red, green, and blue components of an sRGB color.
The lowest possible ratio for two identical opaque colors is 1:1. Pure black against pure white reaches 21:1, the maximum contrast ratio in this color space.
Why luminance matters
Contrast is not simply the difference between two HEX codes or the number of colors that appear distinct. Two colors can have different hues and still have similar luminance, which can make text difficult to read. Calculating the ratio provides a consistent way to evaluate the pair against WCAG thresholds.
Key Features of a Color Contrast Checker
A contrast checker helps you assess color combinations while designing and maintaining digital interfaces. This page includes an interactive HEX color checker for immediate ratio and text-threshold feedback.
Instant contrast ratio
Calculate the contrast ratio between selected foreground and background HEX colors using the WCAG relative-luminance method.
WCAG AA and AAA results
See whether the chosen colors meet AA and AAA thresholds for normal and large text.
Color picker and HEX input
Choose colors visually or enter six-digit HEX values. The picker and text input stay synchronized when the value is valid.
Live text preview
See sample text rendered with your selected colors to help assess the design visually.
Large-text testing
Review the lower WCAG AA and AAA thresholds applicable to qualifying large text.
Quick test presets
Reset the colors or quickly test a black-and-white combination to compare contrast results.
Some other contrast tools offer features such as browser eyedroppers, webpage element inspection, color suggestions, and whole-page auditing. Those capabilities are not provided by this standalone checker unless separately integrated.
Examples of Passing and Failing Color Combinations
The following examples illustrate how contrast varies across common text and background pairs. The ratio is shown for each exact color pair.
| Text color | Background color | Contrast ratio | WCAG AA normal text |
|---|---|---|---|
#000000 | #FFFFFF | 21:1 | Pass |
#1F2937 | #F9FAFB | Approximately 14.7:1 | Pass |
#FFFFFF | #1D4ED8 | Approximately 6.7:1 | Pass |
#CCCCCC | #FFFFFF | Approximately 1.6:1 | Fail |
#777777 | #FFFFFF | Approximately 4.5:1 | Borderline; check the unrounded ratio |
Always test your exact color values. Small changes in brightness can move a combination across a pass/fail threshold. Do not rely on a rounded display value when a color pair is close to the required ratio.
Common Uses for a CSS Color Contrast Checker
Website text
Check body copy, headings, navigation links, captions, and other text against their actual backgrounds.
Buttons and calls to action
Check button labels and meaningful icons against button backgrounds and surrounding colors.
Forms and validation messages
Review labels, instructions, error messages, and visual boundaries where contrast is required.
Dark mode
Verify that text and interface details remain distinguishable when the background and text palette changes.
Design systems
Check foreground and background color tokens before reusing them across components and products.
Email templates
Evaluate text, links, buttons, and footer colors used in HTML email designs.
Accessibility reviews
Record contrast results for important UI patterns as one part of an accessibility evaluation.
Learning and prototyping
Experiment with color combinations during early design work before finalizing a palette.
Accessibility Best Practices for Color Contrast
Meet the appropriate minimum ratio
Aim for at least 4.5:1 for normal text and 3:1 for qualifying large text at WCAG AA. Use the higher AAA thresholds when your project requires or targets that level.
Do not communicate with color alone
Pair color with clear labels, icons, patterns, or other cues so that meaning is not lost for people who cannot distinguish particular colors.
Test all interface states
Check default, hover, active, focus, disabled, selected, and error states. A passing default state does not guarantee that every state has sufficient contrast.
Review meaningful non-text elements
Evaluate icons, component boundaries, and graphical information when they are necessary to understand content or operate the interface.
Do not rely on placeholder text
Keep essential form labels visible and check their contrast. Placeholder text is not a substitute for a persistent label.
Test the real rendered interface
Gradients, transparency, background images, overlays, and neighboring colors can affect the contrast users actually see. A checker using two solid HEX colors cannot fully evaluate those cases.
Combine contrast checks with other accessibility tests
Review keyboard navigation, focus visibility, semantic HTML, accessible names, zoom behavior, and screen-reader support as part of the broader process.
Reminder: A contrast checker is a focused aid, not a complete accessibility audit or a certification of WCAG conformance.
Example: Accessible Button CSS
This example uses white text on a blue background. Test the exact foreground and background colors with the checker above and verify the button in its real interface states.
White text on #1D4ED8 has a contrast ratio of approximately 6.7:1, which exceeds the 4.5:1 WCAG AA requirement for normal text. The button still needs appropriate keyboard focus styling, an accessible name, and sufficient usability in its other states.
Important Notes About WCAG Contrast
AA is a common target
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text, subject to the criterion's stated exceptions.
AAA has stricter text thresholds
WCAG AAA requires at least 7:1 for normal text and 4.5:1 for large text under the enhanced contrast criterion.
Contrast is not simply color difference
Colors can look different because of their hue but still have insufficient luminance contrast for readable text.
Passing one pair does not audit the whole page
Check every relevant text/background pairing and other accessibility requirements across the full interface.
Consider context and exceptions
WCAG includes exceptions for certain content, such as inactive controls and logos. Apply the relevant criterion rather than treating a single ratio as a universal rule for every visual element.
Frequently Asked Questions
What is a CSS color contrast checker?
A CSS color contrast checker calculates the contrast ratio between a foreground color and a background color. It helps designers and developers evaluate whether text color combinations meet WCAG contrast requirements.
What is a good color contrast ratio?
For WCAG AA, use at least 4.5:1 for normal text and 3:1 for qualifying large text. For AAA, the corresponding thresholds are 7:1 and 4.5:1.
What counts as large text under WCAG?
Large-scale text is at least 18 point regular or 14 point bold, approximately 24 CSS pixels regular or 18.67 CSS pixels bold. The applicable WCAG criterion should be checked for its full definition and exceptions.
Does contrast apply to icons and buttons?
WCAG 2.2 Success Criterion 1.4.11 generally requires at least 3:1 contrast for visual information needed to identify applicable user-interface components and meaningful graphical objects. Button text is assessed under the text contrast criterion.
Can I check HEX, RGB, and HSL colors?
This page's interactive checker accepts six-digit HEX values and provides color pickers. To test RGB or HSL values, convert them to HEX first or use a tool that explicitly supports those input formats.
Is the CSS Color Contrast Checker free?
This checker is provided as a browser-based utility on Jomatter.online. It requires no installation to use the interactive contrast calculator embedded on this page.
Does passing contrast guarantee accessibility?
No. Contrast is one part of accessibility. A full review should also consider keyboard operation, focus indicators, semantic markup, accessible names, text resizing, and assistive technology support.
Why can two different colors still have low contrast?
Contrast is based on relative luminance rather than hue difference alone. Two colors may look different but have similar brightness, resulting in a low contrast ratio.
Can I check gradients or transparent colors?
The embedded checker compares two solid HEX colors. Gradients, transparency, images, and overlays need to be assessed in their rendered context with a suitable tool or manual testing.
Does this checker scan my entire website?
No. It checks the two colors entered in the calculator. To audit a complete website, inspect each relevant component and state with additional accessibility testing tools and manual review.
What is the difference between WCAG AA and AAA?
AAA sets stricter text contrast thresholds than AA. AA requires 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1 for normal text and 4.5:1 for large text.
Can I use the checker for dark mode?
Yes. Enter the foreground and background colors used by your dark theme, then repeat the check for relevant components and states. Do the same for your light theme.
What is the maximum contrast ratio?
The maximum contrast ratio for pure black (#000000) against pure white (#FFFFFF) is 21:1 under the WCAG relative-luminance formula.
Does the tool store the colors I enter?
This embedded calculator runs its contrast calculation in your browser and does not send the selected color values to a server in this code. The privacy behavior of the wider website may depend on other scripts or integrations.
Start Checking Color Contrast with Jomatter
Use Jomatter's CSS Color Contrast Checker to calculate contrast ratios for text and background colors, review WCAG AA and AAA text thresholds, and preview color combinations before using them in a digital interface.
Whether you are designing a website, refining a button, building a design system, or checking a dark-mode palette, testing contrast is a practical step toward more readable content. Keep in mind that the calculator checks the selected solid colors only; pair it with a broader accessibility review before publishing.
Related Tools
Continue refining your interface with related design and accessibility utilities, such as a Color Picker, Color Palette Generator, CSS Gradient Generator, CSS Shadow Generator, Dark Mode Converter, or Accessibility Auditor, if available on Jomatter.online.