If you need to check the readability of text on your background, then the WebAIM Contrast Checker may help. I’d strongly recommend a contrast level of 7 to 1 (7:1) or higher.
Other options include adding a translucent background behind your text to increase the contrast in cases where you have complicated images as backgrounds, or to add a “border” around your text using text-shadow. For example, you could add this to your Stylesheet section:
text-shadow: 1px 0px rgba(0,0,0,0.7), -1px 0px rgba(0,0,0,0.7), 0px 1px rgba(0,0,0,0.7), 0px -1px rgba(0,0,0,0.7);
text-shadow: 1px 0px rgba(255,255,255,0.7), -1px 0px rgba(255,255,255,0.7), 0px 1px rgba(255,255,255,0.7), 0px -1px rgba(255,255,255,0.7);
Then, if you have white text you could use the “bbwt” (black border, white text) class for your text, or if you’re using black text, then you could use the “wbbt” (white border, black text) class. The “0.7” in the above code means “70% opacity”, so you can modify that number for more or less opacity in the border (1 = 100% opaque, 0 = 100% transparent).
Hope that helps!