Color Contrast Checker
Enter a foreground and background color in RGB hexadecimal format (e.g., #FD3 or #F7DA39) or choose a color using the color picker. The Lightness slider can be used to adjust the selected color.
WCAG 2 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.
This tool also functions as a basic API. Simply append
&api to any permalink to get a JSON object with the contrast ratio and the AA/AAA pass/fail states. For example: https://webaim.org/resources/contrastchecker/?fcolor=FF0000&bcolor=FFFFFF&api.