SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru DeNasio's Avatar
    Join Date
    May 2001
    Posts
    830
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need some advise on colors

    Hello,

    Take a look at the following page

    http://www.ravelly.com/color.html

    I want to display one of those 3 boxes on success, error, or for warning.

    For "sucess" I use the color #36750f for border and text, and #9bdd74 for background filling.

    Any suggestions what colors I should use for "error" (reddish color) and "warning" (yellowish color)?
    Ballot-Box.net - free polls for webmasters
    FormLog.com - free form processor

  2. #2
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Hi DeNasio,
    I should go for the well known traffic light colors: green - orange - red, and then in a soft pastel variant for the backgrounds, and in an almost black variant for the text color.
    Reason: the contrast between text color and background color has to be enough. Now the contrast ratio in the green cell is 3,5:1, while it should be at least 5:1 (according to the Web Content Accessibility Guidelines), or better 7:1 or more.
    For some more enhancement of the contrast you can add a text-shadow: 1px 1px white.


    You can check it with the Color Contrast Analyser

  3. #3
    SitePoint Guru DeNasio's Avatar
    Join Date
    May 2001
    Posts
    830
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much. I've decided to use the colors you recommended. The only one that I changed a little is the yellow color of the "warning". Click on the my link to see the color I've chosen.
    Ballot-Box.net - free polls for webmasters
    FormLog.com - free form processor

  4. #4
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Yes, coloring will be always a question of flavor, also depending of the rest of the site. The contrast ratio yellow foreground/background is 8,9:1 (and between 8,5:1 and 9,4:1 for different types of color blindness), so you don't hear me complaining.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •