Colour contrast is one of the most common accessibility issues out there. It\u2019s about how different two colours appear in brightness\u2014basically, whether the text stands out clearly from the background.<\/p>\n
On websites, this usually means the contrast between foreground text<\/strong> and background colour<\/strong>\u2014but it can apply to anything visual, like icons, borders, or buttons.<\/p>\n The technical bit? It\u2019s measured using something called the contrast ratio<\/strong>:<\/p>\n Logos are exempt from the guidelines\u2014thankfully\u2014because let\u2019s face it, most logos wouldn\u2019t pass.<\/p>\n You don\u2019t need fancy software or a developer. There are plenty of free tools online where you pop in your foreground and background colours, and they\u2019ll tell you whether it passes. WebAIM\u2019s contrast checker is a good place to start.<\/p>\n In the screenshots I\u2019ve included, the contrast ratio on the right is just under 3. So it fails\u2014just<\/em>\u2014but it still fails.<\/p>\n Often, it only takes a tiny change\u2014darken the text slightly, or lighten the background\u2014and suddenly you\u2019re back over the 3:1 threshold.<\/p>\n The difference might be barely noticeable to the eye, but for someone with low vision, it can be the difference between readable and unreadable.<\/p>\n Moral of the story:<\/strong> check your contrast. It takes seconds, costs nothing, and makes your content usable for far more people.<\/p>\n <\/p>\n","protected":false},"excerpt":{"rendered":" How is Colour Contrast defined? Colour contrast is one of the most common accessibility issues out there. It\u2019s about how different two colours appear in brightness\u2014basically, whether the text stands out clearly from the background. On websites, this usually means the contrast between foreground text and background colour\u2014but it can apply to anything visual, like […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[2],"tags":[],"class_list":["post-6529","post","type-post","status-publish","format-standard","hentry","category-blog"],"yoast_head":"\n\n
\nTesting it is easy<\/h3>\n
\nThe fix? Usually very simple<\/h3>\n
\n
\n