Skip to content

Design/Accessability: Text Background Contrast for white-on-pink and lightblue-on-midblue #88

Open
@jdittrich

Description

Problem: Some color combinations have low contrast and thus low readability for people with visual impairments.

Typical Problems:

  • lightblue (rgb(157, 211, 242)) on midblue (rgb(31, 112, 158))
    image

  • white (rgb(255,255,255)) on pink (rgb(255, 56, 119))
    image

Possible Solutions

  • For blue colors: Consider if the same text in white instead of light blue would also look fine.
    image

  • For pink: Consider using a darker pink (--pink-darker, rgb(213, 43, 97))
    image
    or don’t use pink as background color for large areas and use --mainGrey instead, maybe with a pink accent border.
    image

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions