[accessibility] Colour contrasts

[notabene]

Hi,

After a discussion on Mastodon, I went and checked contrasts in the app with Colour Contrast Analyser.

(Sorry, results are in French as it's my system's installation language.)

Rule of thumb

On a mobile application one should strive to aim at 4.5:1 minimum contrast, because of the conditions in which a mobile app is used (think reflections on the glass, smaller screen, etc.).

Title bar

Premier plan:#FFFFFF Arrière plan:#684972

Le ratio de contraste est de: 7,5:1

Le texte est conforme de niveau AA Le texte est conforme de niveau AAA Le grand texte est conforme de niveau AA Le grand texte est conforme de niveau AAA

All good!

Default text

Premier plan:#737373 Arrière plan:#FAFAFA

Le ratio de contraste est de: 4,5:1

Le texte est conforme de niveau AA Le texte est non conforme de niveau AAA Le grand texte est conforme de niveau AA Le grand texte est conforme de niveau AAA

Yay! This one is good straight away!

Red square

Premier plan:#732A31 Arrière plan:#E56772

Le ratio de contraste est de: 3,1:1

Le texte est non conforme de niveau AA Le texte est non conforme de niveau AAA Le grand texte est conforme de niveau AA Le grand texte est non conforme de niveau AAA

Orange-yellow (or something ;) ) square

Premier plan:#7F6511 Arrière plan:#FFDA65

Le ratio de contraste est de: 4,1:1

Le texte est non conforme de niveau AA Le texte est non conforme de niveau AAA Le grand texte est conforme de niveau AA Le grand texte est non conforme de niveau AAA

Green square

Premier plan:#2B5D38 Arrière plan:#6FC385

Le ratio de contraste est de: 3,6:1

Le texte est non conforme de niveau AA Le texte est non conforme de niveau AAA Le grand texte est conforme de niveau AA Le grand texte est non conforme de niveau AAA

Suggestion

What I would do:

• For dark backgrounds:
  • Darken the background colour a bit more (if needed)
  • Use white type in the squares
• For light backgrounds:
  • Lighten the background colour a bit more (if needed)
  • Use black type in the squares

A handy tool to do just that is tanaguru contrast finder.

Example results:

• Red square
  • Background: #CB4A5A (slightly changed)
  • Foreground: #FFFFFF
  • Result: 9.98 – VALID
• Orange-yellow-etc :)
  • Background: #FFDA65 (unchanged)
  • Foreground: #000000 (black)
  • Result: 15.46 – VALID
• Green
  • Background: #6FC385 (unchanged)
  • Foreground: #000000 (black)
  • Result: 9.82 – VALID

It does look a bit more stern than the semitransparent black that is currently used. I can help you to choose less drastic colours if needed ;)