0

I am currently working on a project where client wants the site to have black background. It is a community/ forum style website for long discussions.

I am having difficulty on styling text on black background for easy readability.

Thanks in advance

Improve this question

2 Answers 2

Reset to default
1

One tool that I use commonly is accessible-colors.com.

You can enter a foreground and background colour. It will tell you if they contrast well enough, and if not propose changes to foreground or background that would be more legible.

Enter #000000 for the black background. If you don't know what code the colour you want is Google has a colour picker that gives you the hex value on the right. Just copy and paste that in to accessible-colors.com.

If you're not sure what colour to start with and you need inspiration, try using colorsafe.co. Again, enter #000000 (black) for the background and it will propose colours that can do the trick.

Ideally you want to pass what's called AA level guideline for web accessibility. This will ensure that there's enough contrast between the text and background that users with low-vision problems can still read the website.

Improve this answer
0

You can refer to this table to obtain colors that have good readability on black background. Source : https://www.lifewire.com/contrasting-foreground-background-colors-4061363 enter image description here

Improve this answer
3
  • Thanks. I need to keep text white on black background. But to me that's kind of tiring for reading large blocks on text. I am using 80-90% white text. Looking for some styling tips for font sizes, letter spacing and line heights to maximum readability.
    – Komal
    Jan 8, 2019 at 12:34
  • Other than following obvious typography rules, keep in mind that around 80% of people prefer black text on white background: No matter what you do dark background will tire the eyes. You can use bigger fonts , boldness and also make sure it`s a sans serif. Use bigger spacing between white text. Try some grey shades as overlayed on black decreases high contrast and might improve readability.
    – Chris
    Jan 8, 2019 at 13:12
  • It's probably the JPEG compression of the image, but I have a hard time reading the "Good" for Red on Black.
    – Tim FitzGerald
    Jan 8, 2019 at 20:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.