How many times have we visited a website where we can't read anything, or used an app with a horrible color combination? From an accessibility standpoint, choosing the wrong palette or contrast ratio can ruin any visibility idea, but the OddContrast portal helps us find the correct values, based on version 2 of the WCAG standard.
According to the WCAG 2 standard (also known as the Web Content Accessibility Guidelines), “contrast” is a measure of the difference in “perceived brightness” between two colors, expressed as a ratio. For example, red text (#ff0000) on a white background (#ffffff) has a ratio of 4:1. If we change the text to blue (#0000ff), the ratio jumps to 8.59:1, making it easier to read. Finally, black text on white has a ratio of 21:1. Interestingly, the ratio remains unchanged if we invert the colors.
Why is this important? Because often color combinations with a very poor ratio are applied, and the text becomes illegible. As someone who has been forced to enlarge font sizes on their computer, I understand more than ever the importance of good contrast. And that idea leads us to OddContrast, a portal specifically designed to calculate contrast ratios on websites, services, and/or accessibility applications.
Optimize Contrast in Your Projects with OddContrast
There’s not much to do on the site to get the most out of it: choose a format that represents colors (eight are available, including HEX and sRGB), and adjust the sliders for the foreground and background colors until you get a “pass” on the cases that interest you. OddContrast defines normal ratios as 4.5:1 for standard text and 3:1 for large text, while an optimized contrast requires 7:1 and 4.5:1 respectively. Additionally, large text is 24px or larger with regular weight, or 19px or larger in bold.
Finally, OddContrast doesn’t claim to be the absolute owner of truth. In fact, we don’t even need a good ratio in all cases, but the difference between a bad color combination and a good one is noticeable. Give it a try!
Official site: Click here
