# Color Contrast Checker

> Calculate contrast ratios between two colors to ensure WCAG accessibility compliance.

**Category:** Dev
**Keywords:** contrast, wcag, accessibility, a11y, color, design, readability
**URL:** https://complete.tools/contrast-checker

## How it works

The Contrast Checker calculates the contrast ratio using the 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 relative luminance is derived from the RGB values of the colors being compared, converted to a scale of 0 to 1. This formula returns a ratio that indicates how distinguishable the two colors are from each other according to human vision standards. The tool then compares the calculated ratio against the WCAG guidelines for text accessibility.

## Who should use this

Web developers designing user interfaces for websites that cater to diverse audiences. Graphic designers creating marketing materials that need to be visually accessible. UX/UI researchers conducting tests on color schemes for applications to ensure compliance with accessibility standards. Content creators developing educational materials that require clear readability for all users.

## Worked examples

Example 1: A web developer is designing a website with white text (#FFFFFF) on a dark blue background (#00008B). First, calculate the luminance for both colors. The RGB values for white are (255, 255, 255) and for dark blue are (0, 0, 139). The luminance for white is 1.0, and for dark blue, it is approximately 0.072. The contrast ratio is calculated as (1.0 + 0.05) / (0.072 + 0.05) = 13.7. This meets the WCAG standards. 

Example 2: A graphic designer uses a light gray text (#D3D3D3) on a light yellow background (#FFFFE0). The RGB for light gray is (211, 211, 211) with a luminance of 0.85, and for light yellow, it is (255, 255, 224) with a luminance of 0.97. The contrast ratio calculation is (0.97 + 0.05) / (0.85 + 0.05) = 1.12. This does not meet the minimum accessibility requirement.

## Limitations

The tool assumes that the colors provided are in the sRGB color space, which may not apply to all contexts. It does not account for variations in monitor calibration, which can affect perceived contrast. Additionally, it is limited to two colors only; it cannot assess complex backgrounds or gradients. Precision may also decrease when colors are on the edge of the acceptable range, leading to potential misclassification of accessibility compliance. Lastly, the tool does not consider factors like font size or weight, which can also influence readability.

## FAQs

**Q:** How does the Contrast Checker handle transparency in colors?


**A:** The Contrast Checker does not account for transparency; it evaluates solid color values only. To assess transparency effects, users must calculate the resulting color against a known background.


**Q:** Can the tool assess color combinations beyond text and background?


**A:** The tool is specifically designed for text and background color combinations and does not evaluate images or other graphical elements.


**Q:** What do I do if my colors do not meet the WCAG standards?


**A:** If the contrast ratio is insufficient, consider adjusting the brightness or saturation of either color to improve contrast without compromising design integrity.


**Q:** Are there any specific color combinations that are universally problematic?


**A:** Yes, combinations like light gray text on a white background or yellow text on light backgrounds are often problematic due to low contrast ratios.

---

*Generated from [complete.tools/contrast-checker](https://complete.tools/contrast-checker)*