Link Contrast Checker

Link Color

Please enter a valid hex triplet, or use the color picker.

Body Text Color

Please enter a valid hex triplet, or use the color picker.

Background Color

Please enter a valid hex triplet, or use the color picker.

The five boxing wizards jump quickly.

Link to Body Text

WCAG A:

Link to Background

WCAG AA:

Body Text to Background

WCAG AA:

Explanation

For optimal usability and accessibility, links should be underlined. If links are not underlined by default, they may be reliant on color and may fail WCAG 2 Level A. To address this color reliance, you must have a 3:1 contrast ratio between link text color and the surrounding body text color. Additionally, the link must present some other non-color indicator (typically it will become underlined) on mouse hover and keyboard focus. Both the link color and the body text color must have a 4.5:1 contrast ratio (or 3:1 for large text) with the background to meet WCAG 2 Level AA.

Enter link, body text, and background colors in RGB hexadecimal format (e.g., #FD3 or #F7DA39) or use the color pickers. The Lightness sliders can be used to adjust the selected color. You will see feedback for all three required contrast calculations.

To check the contrast of large text, or to check against Level AAA contrast requirements, use our standard contrast checker.

New!

This tool also functions as a basic API. Simply append &api to any permalink to get a JSON object with the contrast ratios. For example: https://webaim.org/resources/contrastchecker/?fcolor=FF0000&bcolor=FFFFFF&api.