Responsive type: contrast

We’ve all seen a lot of articles lately about responsive type, but one point is missing: contrast in type.

When redesigning this site a few months ago, I realised that one aspect is overlooked when we do responsive design. Sure, these days we dissect everything in a responsive approach and try to apply this method to grid design, to typography, size, line length etc.

Yet one ‘risk’ –let’s say ‘user experience component’ if we want to be less dramatic– hasn’t been talked about at length so far: luminosity.

Coming from an accessibility background, I’ve had to hammer the point again and again –and then, again once more: contrast is important. But even more so on a portable device.

When you’re viewing a website on a portable device you have more chances of experiencing with poor light: either be in the street, or have reflections on your screen. When on a desktop computer, most of the time you can adjust easily but finding the right position in the office, the right orientation for your screen, for it not to be a nuisance.

Here’s what I’ve decided:

  • When viewed above a certain amount of pixel width (YMMV, let’s keep in mind that breakpoints are not the same in every design), colors can be everything I want –of course we have to at least abide to AA accessibility contrast guidelines.
  • when viewed below this certain amount of pixels , all the text will be black on white and not, for example, a subtle hue of dark grey on a subtle off-white background anymore.

I’d love to hear more about this kind of stuff for responsive designs.


  • tetue (26 September 2012)

    Je m’intéresse justement à cela en ce moment et je cherche des exemples visuels pour illustrer cette problématique de contraste pour la bonne lisibilité des textes (responsive ou pas).

    Reply to tetue

  • Nico (26 September 2012)

    The problem is : if you have too powerful contrasts, you may have accessibility problems (dyslexic people, etc.).

    So how do you provide a good experience on mobile :

    • if you don’t have enough contrast in poor conditions => experience might be not good.
    • if you have a very high contrast in good conditions => user with accessibility disease for high contrasts will get a bad experience.

    As far as I know, a good way to define contrasts is to get values "a little bit higher" than recommendations (with all tools, see for example : ).

    Reply to Nico

  • karl (26 September 2012)

    @tetue, un bon mauvais example, le contraste de mes dates sur mes billets de carnet. Je pense qu’ils doivent créer des problèmes.

    Reply to karl

  • Emmanuel (26 September 2012)

    Il est ici question de contraste de couleur/teinte simplement. C’est intéressant mais la notion de contraste(/poids) en typographie est plus large (interlignage, fonte, teinte, corps,...)

    J’imagine déjà un texte variant dynamiquement sur tous ces paramètres à la fois. Chaud à réaliser, c’est certain :)

    Reply to Emmanuel

  • JulienW (29 September 2012)

    Sans parler des trucs comme utiliser text-shadow pour créer un tout léger ombrage qui accentue le texte et (je trouve) la lisibilité.

    Reply to JulienW

  • Stéphane (16 November 2012, in reply to tetue)

    tetue : Tu veux dire quoi par "exemples visuels" ? Sur nota-bene ces jours-ci, affiche en petit et en grand et tu verras le boulot. Ou alors tu parles d’autre chose ?

    Reply to Stéphane

  • Stéphane (16 November 2012, in reply to Nico)

    Nico : I think we are still trying out stuff on this subject.

    So I’m aiming at bad visibility because, basically, I think it’s the most common case from what I see around me.

    Reply to Stéphane

  • Stéphane (16 November 2012, in reply to Emmanuel)

    Emmanuel : La plupart des designs responsive bien faits que je vois changent aussi l’interlignage, modifient parfois des graisses, etc. Ici je m’étonne (maladroitement, j’ai écrit trop vite) du fait que personne ne parle jamais de contraste dans les articles sur le responsive.

    Reply to Stéphane

  • tetue (16 November 2012, in reply to Stéphane)

    Stéphane : je cherche des exemples pour illustrer les bonnes pratiques créa : des screenshots, « do / don’t », infographies, etc. Du coup, j’ai capturé la page de cet article, pour la citer dans mon « petit florilège de bonnes pratiques graphiques » pour Paris Web :)

    Reply to tetue

  • Stéphane (16 November 2012, in reply to tetue)

    tetue : un don’t : prends un site de Happy cog par exemple et affiche-les en petit. Jamais ils ne bossent sur les contrastes (alors que quand même ils ont mon respect plein et entier par ailleurs)

    Reply to Stéphane

Who are you?
Your post

This form accepts SPIP shortcuts [->url] {{bold}} {italic} <quote> <code> and the HTML code <q> <del> <ins>. To create paragraphs, simply leave blank lines.

Hypertext link

(If your message refers to an article published on the web or to a page providing further information, please enter the title of the page and its URL below).