Good text foreground color for a given background color

by

For maximum legibility, you want maximum brightness contrast without getting into hues which don’t work together. The most consistent way to do this is to stick with black or white for the text color. You might be able to come up with more aesthetically pleasing schemes, but none of them will be more legible.

To pick between black or white, you need to know the brightness of the background. This gets a little more complicated, due to two factors:

  • The perceived brightness of the individual primaries red, green, and blue are not identical. The quickest advice I can give is to use the traditional formula to convert RGB to gray – R*0.299 + G*0.587 + B*0.114. There are lots of other formulas.

  • The gamma curve applied to displays makes the middle gray value higher than you’d expect. This is easily solved by using 186 as the middle value rather than 128. Anything less than 186 should use white text, anything greater than 186 should use black text.

More Related Contents:

  1. Programmatically Lighten a Color
  2. Given a background color, how to get a foreground color that makes it readable on that background color?
  3. What are MVP and MVC and what is the difference?
  4. What is the need of JSF, when UI can be achieved with JavaScript libraries such as jQuery and AngularJS
  5. How to print color in console using System.out.println?
  6. How to maintain widgets aspect ratio in Qt?
  7. One or more resources has the target of ‘head’ but not ‘head’ component has been defined within the view
  8. How to change color of the back arrow in the new material theme?
  9. Blackberry User Interface Design – Customizable UI?
  10. How to customize a ListField in BlackBerry?
  11. How can I upload a PDF file using Karate UI Automation? [duplicate]
  12. Android: Where is the Spinner widget’s text color attribute hiding?
  13. Multiple colors in a C# .NET label
  14. HTML: Changing colors of specific words in a string of text
  15. jquery change background color user scroll
  16. How to do page navigation for many, many pages? Logarithmic page navigation
  17. How to easily print ascii-art text? [closed]
  18. Blackberry – fields layout animation
  19. How to customize UISwitch button in iphone?
  20. android change text color of items in spinner
  21. Is functional GUI programming possible? [closed]
  22. What is the shortest perceivable application response delay?
  23. Alternatives to ssh X11-forwarding for Docker containers
  24. How do you add UI inside cells in a google spreadsheet using app script?
  25. How do you use the LaTeX blackboard font in MATLAB?
  26. How to change text or background color in a Windows console application
  27. How to display text on the screen without a window using Python
  28. Qt signaling across threads, one is GUI thread?
  29. Matplotlib plot zooming with scroll wheel
  30. How to make a GUI for bash scripts? [closed]

Leave a Comment