Site Redesign: Contrast Ratio · Thinker's Tech Tips

Thinker's Tech Tips

A web developer blog

February 27, 2015

Site Redesign: Contrast Ratio

typographyusabilitywcagcontrast

During this site redesign, I wanted to check if my text look good against the background. I only learned later that the term is called contrast-ratio.

So I googled around to find a tool that would help me with that task. Fortunately, I found a minimalistic tool that is just right for my use case.

Contrast-Ratio is a tool to check if the contrast ratio of your text and background match the WCAG standards. In layman’s terms, it indicates if your font and background combination has enough contrast to be readable.

As a rule of the thumb, WCAG recommends a contrast ratio of 4.5:1

I used this to get this light-on-dark theme that this site currently has. It has a contrast ratio of 10, which is more than enough to pass the WCAG standards.