Contrast Checker – WCAG Contrast Ratio
Enter a foreground and background color to check the contrast ratio and see whether your combination meets WCAG AA and AAA accessibility standards.
Enter two colors to check contrast
Supports HEX, RGB, HSL, and OKLCH formats
Try an example
Check Color Contrast for Accessibility
Color contrast matters for readability. When foreground text doesn't have enough contrast against its background, it becomes difficult to read — especially for users with low vision or color vision deficiencies.
This contrast checker calculates the contrast ratio between any two colors and evaluates it against WCAG 2.1 success criteria. Enter colors in HEX, RGB, or HSL format and get instant results.
Understanding WCAG Contrast Levels
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios for text readability. There are two conformance levels:
- WCAG AA Normal Text — requires a contrast ratio of at least 4.5:1
- WCAG AA Large Text — requires a contrast ratio of at least 3:1 (large text is 18pt+ or 14pt+ bold)
- WCAG AAA Normal Text — requires a contrast ratio of at least 7:1
- WCAG AAA Large Text — requires a contrast ratio of at least 4.5:1
AA is the standard level most websites and apps aim for. AAA is the enhanced level, recommended where maximum readability is important.
How to Use the Contrast Checker
- Enter a foreground (text) color — HEX, RGB, or HSL
- Enter a background color in any supported format
- See the contrast ratio and a live preview of text on that background
- Check the pass/fail results for WCAG AA and AAA levels
- Use the swap button to quickly reverse foreground and background
When to Check Color Contrast
- Choosing text and background colors for a website or app
- Verifying that a design system meets accessibility requirements
- Testing button, link, or icon colors against their backgrounds
- Checking dark mode color combinations
- Meeting legal accessibility standards (ADA, EAA, Section 508)
Accurate, Instant, and Free
This tool calculates the WCAG 2.1 contrast ratio using the standard relative luminance formula. Results are computed instantly in your browser — no data is sent to any server.
Need to find or convert a color first? Use the Color Picker to extract colors from an image, or the Color Converter to switch between HEX, RGB, and HSL. Once your colors pass, the Palette Generator can help you build a full harmonious scheme around them.
Frequently Asked Questions
- What is a good contrast ratio for text?
- For normal-sized body text, a contrast ratio of at least 4.5:1 is required to meet WCAG AA. For large text (18pt or 14pt bold and above), the minimum is 3:1. For the highest level of accessibility (WCAG AAA), normal text needs at least 7:1.
- What is the difference between WCAG AA and AAA?
- AA is the standard conformance level that most websites and apps should meet. AAA is the enhanced level with stricter contrast requirements, recommended for content where maximum readability is critical, such as government or healthcare websites.
- What counts as large text in WCAG?
- Large text is defined as 18 points (24px) or larger at normal weight, or 14 points (approximately 18.66px) or larger when bold. Large text has lower contrast requirements because its size makes it inherently easier to read.
- What color formats does this checker support?
- You can enter colors in HEX (e.g. #1E293B), RGB (e.g. rgb(30, 41, 59)), or HSL (e.g. hsl(222, 33%, 17%)) format. The tool auto-detects the format.
- How is the contrast ratio calculated?
- The contrast ratio is calculated using the WCAG 2.1 formula: (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. The result ranges from 1:1 (no contrast) to 21:1 (maximum contrast, black on white).
- Does this tool work on mobile?
- Yes. The contrast checker works on any device with a modern browser — desktop, tablet, or phone.
- Is this tool free?
- Yes. ColourPicker.app is completely free to use, with no signup required.
- Can I check contrast for UI components, not just text?
- WCAG 2.1 also requires a minimum 3:1 contrast ratio for meaningful UI components and graphical objects (Success Criterion 1.4.11). You can use this checker to verify those combinations as well — the ratio calculation is the same.