Color and Contrast Practice

Back to resources

Contrast

Text contrast

Does this text have enough contrast?

Does this larger text have enough contrast?

Test button contrast

Text with a non-solid background

This text has a gradient background. How do we measure its contrast?

Color use and contrast of non-underlined links

I have read and agree to the Copyright & Terms of Use

Hint: For this activity, we recommend using our link contrast checker.

Contrast of link states

If you have any questions, please contact us.

Contrast of keyboard focus indicators

Test my keyboard focus outline

Hint: You will need to toggle :focus and :focus-visible.