Day 57

Text and background color contrast matters

14 Jul 2022

Color contrast between text and background is very important for perceivability. As colors come closer to each other, they’re more difficult to distinguish. Notice that colors that work well with big font sizes may not for smaller text.

Three blocks of text, each block with three lorem ipsum paragraphs in three different text sizes. The first block is white over black, color contrast of 21 to 1. Works every time. The second block is a ratio of 4.5 to 1 good for the two larger paragraphs but already not enough for the smallest one. The third block has a ratio of 2.9 to 1. It is a bad ratio even for the largest text size.

Some of you have asked me how you can support what I do. This would really help, and would be hugely appreciated:

  • Find these posts useful? Share them at work, on social media, or with anyone that might find them interesting. Let's spread the word!

  • Check out any of my apps or games: Xarra!, RetroRapid!, or Mestre!.

    • A download and a review go a long way. They're free by default. On the App Store, ratings and reviews really help more people discover them.

    • Finding any of them useful? If so, and if you can afford it, purchasing lifetime access to all features or subscribing lets me buy the coffee that keeps me caffeinated. Caffeine keeps me going to maintain the apps, bring in new features that I hope you'll love, and keep writing.

You may also find interesting...

Make sure you support Dynamic Type up to the largest text size available. Take into account that there are five extra accessibility sizes available from the Accessibility Settings. It can make a huge difference for lots of users.

Support both orientations, if possible. I know not even iOS itself does it, but it hasn't always been like that. You'll create a more robust UI that will be easier to port to iPadOS. And especially, don't force your users to rotate their devices.

When configuring a largeContentImage or adjustsImageSizeForAccessibilityContentSizeCategory, it is important to use a pdf asset and preserve the vector data so the icons are crisp at any size.


Content © Daniel Devesa Derksen-Staats on Accessibility up to 11! is licensed under CC BY 4.0. License details