npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

contra-color

v1.1.2

Published

For a given color, find a contrasting color (not optimal).

Downloads

1

Readme

contra-color

For a given color, find a contrasting color (not optimal). Try it NOW!

Usage

Use npm

Run command npm i contra-color

import ESM module

import { getContrastingColor, getContrast } from 'contra-color';

import CommonJS module

const contra = require("contra-color");
console.log(contra.getContrastingColor("#0f0f0f"));

import UMD module

Add <script src="https://unpkg.com/contra-color/dist/contra-color.umd.js"></script> to your HTML file.

Then you can call API functions like contraColor.getContrastingColor('#f0f0f0')

API

function getContrastingColor(c: string, isLinearLuminance?: boolean, contrastDiff?: number): IContraColor

  • get a contrasting color for a given color
  • If isLinearLuminance is true, it will use the linear luminance formula. Otherwise, it will use power curve formula.
  • Set contrastDiff as 0 to find color with maximum contrast. If you pass a number in range (0,20], it will find a color with a the smallest contrast that is greater then contrastDiff

function getContrast(c1: string, c2: string, isLinearLuminance?: boolean): number

  • Find contrast of two colors.
  • If you pass isLinearLuminance, it will calculate luminance with power curve formula.

Problem

What is the best font color for a certain background color? AFAIK, this question doesn't have a scientifically proven answer for now (29 October 2021).

Background

World Wide Web Consortium (W3C) publishes some guidelines like Web Content Accessibility Guidelines (WCAG). According to these, contrast ratio is defined as $$(L_1 + 0.05) / (L_2 + 0.05)$$ where $L_1$ is the relative luminance of the lighter of the colors, and $L_2$ is the relative luminance of the darker of the colors. Mozilla Developer Network (MDN) provides explanations about calculating relative luminance.

In the below codes, luminance function defines the relative luminance. If you give RBG values which are in range [0,255], the function will return a luminance value.

function luminance(R: number, G: number, B: number) {
  const r = sRGBtoLin(R);
  const g = sRGBtoLin(G);
  const b = sRGBtoLin(B);
  return r * 0.2126 + g * 0.7152 + b * 0.0722;
}

function sRGBtoLin(colorChannel: number) {
  colorChannel = colorChannel / 255;
  if (colorChannel <= 0.04045) {
    return colorChannel / 12.92;
  } else {
    return Math.pow((colorChannel + 0.055) / 1.055, 2.4);
  }
}

According to the above definitions of contrast ratio and relative luminance, the contrast ratio can be 1 at minimum, 21 at maximum.

Human Perception of Luminance

According to MDN, human perception is roughly a power curve. For this reason, we also let the user use non-linear luminance values.

Too High Contrast Ratio

According to some reseearch too high contrast difference is not that good.

Among the contrast revisions, provide guidance on excessive contrast — too high of a contrast causes reading problems and eye strain as well.

source: https://github.com/w3c/wcag/issues/695#issuecomment-483077339

Solution

Brute Force

Brute force search for finding the best contrasting color needs three for loops for each color channel. This means 256256256 = 16777216 lines of execution. This takes time!.

Greedy Search

We make a greedy search. We iterate over each channel just once. We start from the most important channel to the least important channel. The most important channel is green since its coefficient is the largest 0.7152 in the equation, the least important channel is blue since its coefficient is the smallest 0.0722 in the equation. Since greedy search does not give an optimal solution, we also start from different colors like black, white and, a random color.

Limiting Contrast Difference

To limit the contrast ratio, we start from the current color and then we diverge. As mentioned before too high contrast might not be ideal for readability.

Comments and Discussion

  • The algorithm might not give always the color with maximum contrast.
  • If you specify a contrastDiff again it might not give a color with a high contrast.
  • There are some discussions regarding Contrast Ratio Math. So even the formulas accepted by W3C are questionable and can be changed in the future.
  • For me, it is very interesting that this is an active research question.