Graphical Objects and User Interface Components
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, and a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). 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.
Use our link contrast checker to evaluate links that are identified using color alone.
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.