Catman's Color Brightness, Contrast, and Harmony Tool

Here's some text to show brightness, contrast and harmony.

Here's some text to show brightness, contrast and harmony.

Brightness, Contrast & Harmony Calculator




Foreground Color : #000




Background Color : #fff






Instructions

  1. Select the Red, Green and Blue values for both Foreground and Background. Use the left and right center blocks to visualize the colors.
  2. Click on the Calculate Brightness, Contrast, and Harmony button.
  3. The values for foreground brightness, background brightness, contrast, and harmony will appear in the boxes above the Calculate Brightness, Contrast, and Harmony button. The left and right display fields will change to the selected colors, with foreground and background colors reversed in the box to the right.

Notes

This tool is not a substitute for
your own good judgment.

Brightness

Brightness runs from 0 to 10. The higher the number, the brighter the color.

The calculator determines the brightness value with the following formula: Brightness = (299 * Red3 + 587 * Green3 + 114 * Blue3)/(2553 * 100) This formula was derived from a formula on the Techniques For Accessibility Evaluation And Repair Tools page at the W3C website. The original formula does not cube the color values, but testing revealed that cubing produces better results.

Contrast

Contrast runs from 0 to 10. The higher the number, the stronger the contrast.

The best contrasts run from 6 to 10, but keep in mind that higher contrasts are, in general, easier to read. However, in some cases, high contrast colors will clash and should not be used together without good reason.

The calculator determines contrast by taking the absolute difference between the foreground and background brightness values.

Harmony

Harmony runs from 0 to 60. The higher the number, the better the harmony.

The best harmonies for text and background run from 30 to 60. For borders and other colored elements where contrast is not critical, harmonies running from 10 to 30 may be usable.

The calculator determines the harmony value with the following formula: contrast / (1 / ((abs(Rf - Gb) + abs(Rf - Bb) + abs(Gf - Rf) + abs(Gf - Bb) + abs(Bf - Rb) + abs(Bf - Gb)) / 255) Xf refers to foreground colors, and Xb refers to background colors.