With contrast ratio coefficients

"Tooltip" number when hovering over text and sample areas is the contrast ratio coefficient relative to minimum contrast defined in WCAG 2.0 (Web Content Accessible Guidelines) Success Criterion 1.4.3. Less than 1.0 means element contrast does not meet standard as required by the European Commision for web content. The mimimum level is adjusted for font size, style, and contrast level by the contrast class selected (AA or AAA). This feature is a beta release. If it does not seem to work as expected, email Glenn at JavaScript needs to be enabled. Mention which portion isn't working right, what you expected, and what you actually got. Your assistance is appreciated.

NOTES

While there are plenty of color scheme tools available, none seem to show the selected colors in a realistic, assignable page mock up. So I've thrown together what I consider a realistic page mock up. I'm not even going to try to replicate a color scheme tool, so you'll have to manually paste or type the desired hex color values into the various fields. One possible source of hex color values is from the color list tab of the Color Scheme tool linked above. I also provide some basic text styling controls so the text better represents your actual page. Alternately, you can experiment with these to establish the font, size, and spacing that's ideal for your site's basic text. Be careful with the font name input, no validation is done, so type carefully.

No information entered here is saved unless you choose to do so, and none of it is sensitive. The data is not even sent anywhere, it's all kept within your own computer.

Any designer will tell you that, while these mathmatical schemes are a good starting point, you will always need to adjust the colors to work with your actual application. Fortunately, once your initial color scheme is setup here, it's easy to tweak your settings because this page uses the JSColor picker library. You will see that a small color picker pops up anytime you click on any of the color number fields. The reason we show all four link pseudo classes instead of allowing them to behave normally is that we can't assign colors to link pseudo classes on the fly like we do for the other text and backgrounds. Also, this way, you can see how the selected color looks without having to move and click your mouse.

Your latest color selections are automatically saved in a browser cookie. If you leave the page, it will re-open exactly as you left it, at least if you return within 90 days. After that, the cookie crumbles and you will get the default settings again. To save data somewhere besides the local cookie, output the data to the text box below and then copy/paste that data into an empty text file using a text editor such as Notepad. To reload that data, paste it back into the text box and click Load Color Data. You can also save your color data by simply saving the complete HTML page.

Reset (must close tab, then reload page to complete. If that does not work, delete bcw_colrs cookie for the https://.com site & then close and reload page again)
Output Color Data

Load Color Data

If you don't like the way this page is set up, you could save the complete HTML page, then edit the HTML to your heart's content. The reason for the color picker spectrum being shown below is to be sure it gets saved with the complete page. Otherwise, the color picker will work, but without the image displayed to orient you.

There is one minor glitch with the color picker, in that when you paste a color number into a color field, the change event doesn't immediately trigger, which causes the associated element's color to fail to update to the new color. To force an update, simply click on the color picker's value slider (right side of main picker box) triangle. The element will then be updated.