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
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
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
This is what the new text color looks like on your background