This tool calculates the contrast ratio of a text and background color combination, then determines whether it satisfies the Web Content Accessibility Guidelines (WCAG) at the AA and AAA levels. If not, it'll give you the closest WCAG-compliant text color.
Colors can be entered in hex, RGB, or HSL format.
Accepted inputs
- Hex: Inputs are case-insensitive and can include or omit the pound sign. 3-digit hex codes can also be used. #FFFFFF, ffffff, and fff are inputs that will work.
- RGB: Input must follow the format "rgb(r,g,b)", case-insensitive. Semicolons can be used instead of commas, and whitespace will be ignored. Values should be between 0 and 255. rgb(255,255,255), rgb(255; 255; 255), and RGB(255,255,255) are inputs that will work.
- HSL: Input must follow the format "hsl(h,s,l)", case-insensitive. Semicolons can be used instead of commas, and whitespace will be ignored. Values for hue must be between 0 and 360. Values for saturation and luminosity must be between 0 and 100. Percentages are also accepted. hsl(0,100,100), HSL(0;100;100), and HSL(0, 100%, 100%) are inputs that will work.
Enter text color:
Enter background color:
This is what your chosen text and background colors look like
Contrast results
The closest color that would satisfy AA contrast requirements (4.5) is:
This is what the new text color looks like on your background
The closest color that would satisfy AAA contrast requirements (7) is:
This is what the new text color looks like on your background