How do I check if my colours are accessible?

Question

My mentor said our grey text "fails contrast". How do I check this and what number should I aim for?

Ananya Iyer · Accepted Answer

Aim for **4.5:1** for normal text and **3:1** for large text (WCAG AA). In Chrome DevTools, inspect the text and the colour picker shows the ratio with a tick or cross. For design files, the Stark or Contrast plugins in Figma do the same.

How do I check if my colours are accessible?

1 Answer

Log in to view all 1 Answer