Contrast Ratio
4.03:1
Foreground
#FFFFFF
rgb(255, 255, 255)
hsl(0, 0%, 100%)
Background
#7B2CBF
rgb(123, 44, 191)
hsl(271, 63%, 46%)
Accessibility Standards (WCAG 2.1)
Select Colors
Use the color pickers or type HEX codes for your Foreground Color (e.g., text color) and Background Color. The tool accepts 3-digit or 6-digit HEX codes (e.g., #FFF or #FFFFFF).
View Instant Results
The contrast ratio and WCAG 2.1 accessibility ratings (AA & AAA for normal and large text) will update automatically as you change colors. You can also click "Check Contrast" to manually trigger a check.
Analyze the Preview
See a live preview of how your chosen foreground and background colors look together with both normal and large sample text. This helps visualize the readability.
Swap Colors (Optional)
Click the "Swap Colors" button to quickly switch the foreground and background colors and see the new contrast results.
Copy Color Values
Easily copy the HEX, RGB, or HSL values for both your foreground and background colors using the dedicated "Copy" buttons.
Pro Tip: Aim for at least WCAG AA compliance for most web content. For large text (18pt or 14pt bold), a ratio of 3:1 is AA compliant. For normal text, 4.5:1 is needed for AA.
Improves Accessibility
Ensures content is readable for people with visual impairments, including low vision and color blindness.
Enhances Readability
Good contrast makes text easier to read for everyone, especially in various lighting conditions or on different screens.
Better User Experience
Reduces eye strain and makes your website or application more comfortable and enjoyable to use.
Meets WCAG Standards
Helps you comply with Web Content Accessibility Guidelines (WCAG), which are international standards for web accessibility.
Learn about WCAGSEO Benefits (Indirectly)
Accessible websites often have better usability metrics, which can positively influence search engine rankings.
Wider Audience Reach
Making your content accessible allows more people to engage with it, expanding your potential audience.
What is a contrast ratio?
A contrast ratio measures the difference in perceived luminance (brightness) between two colors, typically a foreground color (like text) and a background color. It's expressed as a ratio, for example, 4.5:1. A higher ratio means greater contrast.
What are WCAG AA and AAA levels?
WCAG (Web Content Accessibility Guidelines) defines three levels of conformance: A (lowest), AA (mid-range), and AAA (highest).
- Level AA: This is the generally recommended level of accessibility for most websites. It requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
- Level AAA: This is a stricter level, often aimed for by specialized sites or parts of sites. It requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
What is considered "Large Text" by WCAG?
According to WCAG 2.1, large text is defined as text that is:
- At least 18 point (typically 24px) in size.
- Or, at least 14 point (typically 18.66px) and bold.
Our preview shows examples to help you visualize this.
Can I use colors that fail the contrast check?
While you can technically use any colors, it's highly recommended to use color combinations that pass at least the WCAG AA contrast requirements for text content. Using colors with poor contrast can make your content difficult or impossible for some users to read.
For decorative elements or logos where readability of specific text is not critical, the contrast requirements might be less stringent, but it's always good practice to consider contrast.
Does this checker work for text on images?
This tool is designed for checking contrast between solid foreground and background colors. For text on images or gradients, ensuring good contrast is more complex. You would need to identify the least contrasting part of the background behind the text and check that against your text color. Alternatively, you can add a solid background behind the text on the image to ensure consistent contrast.
Your Contrast Checks are Safe
Client-Side Calculations: All contrast calculations are performed directly in your browser. No color data is sent to our servers.
No Data Storage: We don't store or track the colors you test. Your design choices remain confidential.
Always Free: Use this accessibility tool as often as you need, completely free of charge and without any sign-up.
By using this tool, you agree to our Terms of Service and Privacy Policy. We are dedicated to providing safe and useful tools.
User Testimonials
What designers and developers say about our Contrast Checker