Giter VIP home page Giter VIP logo

rgb-lum's Introduction

RGB Luminance Experiment

The objective of this experiment is to find three shades: one of red, one of green, and one of blue such that they have approximately equal contrast on white as well as black background.

The definitions of luminance and contrast ratio as defined in Techniques for WCAG 2.0 were used in this experiment.

Code

The code in lum.py demonstrates a few things:

  • When a color has equal contrast on white and black backgrounds, its luminance must be sqrt(x^2 + x) - x where x = 0.05 as specified in the WCAG 2.0 documentation.

    This formula is obtained by solving the equation obtained from setting the contrast ratio of the color on white background equal to that of the color on black ground, i.e., the equation:

    (luminance(white) + x) / (luminance(color) + x) = (luminance(color) + x) / (luminance(black) + x).

    We know that luminance(white) = 1 and luminance(black) = 0. Let L = luminance(color). Now solving (1 + x) / L = (L + x) / L, we get:

    L = sqrt(x^2 + x) - x.

    For x = 0.05 as defined in the WCAG 2.0 document, this turns out to be:

    L = 0.1791 approximately.

  • The shades #ec0304 of red, #028902 of green and #166bff of blue have a luminance of 0.1791 approximately with a contrast ratio of 4.58 approximately with respect to both white and black backgrounds.

  • An HTML file named color-preview.html is generated that provides a visual demonstration of the colors on both white and black backgrounds.

Result

The screenshot below shows how the three shades look like on white and black backgrounds:

Shades of red, green, and blue

The contrast of the colors on both backgrounds look good to my eyes. For comparison, here is how pure red, green, and blue shades look:

Pure red, green, and blue

The green here is too bright and contrasts poorly with white background. The blue here is too dark and contrasts poorly with black background.

License

This is free and open source software. You can use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of it, under the terms of the MIT License. See LICENSE.md for details.

This software is provided "AS IS", WITHOUT WARRANTY OF ANY KIND, express or implied. See LICENSE.md for details.

rgb-lum's People

Contributors

susam avatar

Watchers

 avatar James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.