The quick brown fox jumps over the lazy dog. (Normal Text 16px)
The quick brown fox jumps over the lazy dog. (Normal Text 12pt Bold)
The quick brown fox jumps over the lazy dog. (Large Text 24px)
The quick brown fox jumps over the lazy dog. (Large Text 18pt Bold)
AA (Normal Text)
Ratio ≥ 4.5:1
AA (Large Text)
Ratio ≥ 3:1
AAA (Normal Text)
Ratio ≥ 7:1
AAA (Large Text)
Ratio ≥ 4.5:1
- Input Colors: Enter your Foreground and Background HEX codes in the input area. You can type HEX codes (e.g., `#FFFFFF`, `FFF`) or click the small color swatch next to the input to use the native color picker.
- Preview and Check: As you input colors, the "Text Preview Sample" instantly updates, showing how your colors will look with a text. Click "Check Contrast" to calculate the exact ratio and see if it meets accessibility standards.
- Swap & Compare: Use the "Swap Colors" button to quickly reverse your foreground and background, helping you explore different combinations.
- Review Results: The tool displays the calculated contrast ratio and indicates whether your color pair meets WCAG 2.1 AA and AAA accessibility levels for both normal and large text.
This Color Contrast Checker helps designers and developers ensure that their text is easy to read by calculating the contrast ratio between two colors. It is a useful tool for creating eye-catching designs.
-
WCAG 2.1 Compliant:
- The tool checks your color combinations against the Web Content Accessibility Guidelines (WCAG) 2.1, the international standard for web accessibility.
-
Calculates Luminance Contrast:
- It uses a specific algorithm to determine the "luminance contrast ratio" how light or dark two colors are in relation to each other. This is a key factor in readability.
-
Checks AA & AAA Levels:
- You can get pass/fail statuses for two main levels of WCAG compliance:
- Level AA: The minimum contrast required for most web content.
- Level AAA: A higher, more stringent contrast requirement, often used for critical information or enhanced accessibility.
- You can get pass/fail statuses for two main levels of WCAG compliance:
-
Live Preview:
- The integrated sample text area updates in real-time, giving you an immediate visual representation of how your selected colors will perform, even before the ratio is calculated.
Why is color contrast important for accessibility?
Good color contrast ensures that people with various visual impairments (such as low vision, color blindness, or even age-related vision loss) can easily read text and understand graphical elements. Without sufficient contrast, text can blend into the background, making it unreadable for a large portion of users.
What is the difference between WCAG AA and AAA?
- AA (Minimum): Requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. This is the most common target for web accessibility.
- AAA (Enhanced): Requires a higher contrast ratio of at least 7:1 for normal text and 4.5:1 for large text. This provides greater accessibility but sometimes limits design flexibility.
What is "large text" in the context of WCAG?
WCAG defines "large text" as text that is at least 18pt (24px) or 14pt (18.66px) and bold. These larger text sizes have more relaxed contrast requirements because they are inherently easier to read than smaller text.
Why did my color input change after typing?
The tool automatically normalizes HEX codes for consistency. For example, if you type `FFF`, it will be converted to `#FFFFFF`. This ensures that calculations are based on a common format and makes it easier to copy and paste accurate values.
Does this tool work for images of text or purely decorative text?
This tool is designed for actual text content. For text images, the WCAG guidelines still apply, but contrast needs to be measured from the image itself. Purely decorative text (with no information) and logos are usually exempt from strict contrast requirements, although good contrast is always recommended.
