Color Contrast Ratio Demo Page

Contrast Ratio, the difference in contrast between text color and background color, is extremely helpful for users with color vision deficiency.

The Web Content Accessibility Guidelines (WCAG) specify that for AA level, the contrast ratio should be greater than 4.5:1, and for large text, it should be greater than 3:1. For AAA level, the contrast ratio should be greater than 7:1, and for large text, it should be greater than 4.5:1.

According to the WCAG specification, the calculation formula is (L1 + 0.05) / (L2 + 0.05), where L1/L2 are the luminance of the two colors. Below is the real-time calculation formula:

(0.9547598590513481 + 0.05) / (0.24498416588930616 + 0.05) = 3.406148448755679

R
G
B
A
AaAA Large
3.406148448755679
R
G
B
A