austinshenk / elm-w3 / W3.Color

Utility module that makes it easy to test how accessible combinations of colors are with each other. The common use case for these functions is to test your app colors for contrast, brightness, and color blindness contrast and then make adjustments to colors as needed.

Color Blindness

Useful functions for loosely simulating various kinds of color blindness.

Note: These functions will not give you a color that can be easily viewed by someone with the disability. It will give you an approximation of how they view that color.


type alias Color =
{ r : Basics.Float
, g : Basics.Float
, b : Basics.Float 
}

protanopia : Color -> Color

Approximation for Red color blindness

|0.567  0.433  0    |
|0.558  0.442  0    |
|0      0.242  0.758|

protanomaly : Color -> Color

Approximation for mostly Red color blindness

|0.817  0.183  0    |
|0.333  0.667  0    |
|0      0.125  0.875|

deuteranopia : Color -> Color

Approximation for Green color blindness

|0.625  0.375  0  |
|0.7    0.3    0  |
|0      0.3    0.7|

deuteranomaly : Color -> Color

Approximation for mostly Green color blindness

|0.8    0.2    0    |
|0.258  0.742  0    |
|0      0.142  0.858|

tritanopia : Color -> Color

Approximation for Blue color blindness

|0.95  0.05   0    |
|0     0.433  0.567|
|0     0.475  0.525|

tritanomaly : Color -> Color

Approximation for mostly Blue color blindness

|0.967  0.033  0    |
|0      0.733  0.267|
|0      0.183  0.817|

achromatopsia : Color -> Color

Approximation for Complete color blindness

|0.299  0.587  0.114|
|0.299  0.587  0.114|
|0.299  0.587  0.114|

achromatomaly : Color -> Color

Approximation for Mostly color blindness

|0.618  0.32   0.062|
|0.163  0.775  0.062|
|0.163  0.32   0.516|

normal : Color -> Color

Approximation for normal eyes

|1  0  0|
|0  1  0|
|0  0  1|

Contrast


type alias Contrast =
Basics.Float

contrast : Color -> Color -> Contrast

The contrast ratio between 2 colors. Returns a result between 1 and 21

isAA : Contrast -> Basics.Bool

Test for AA compliance

isLargeTextAA : Contrast -> Basics.Bool

Test for AA compliance for text larger than 18pt

isAAA : Contrast -> Basics.Bool

Test for AAA compliance

isLargeTextAAA : Contrast -> Basics.Bool

Test for AAA compliance for text larger than 18pt

Brightness

brightness : Color -> Color -> Basics.Float

The brightness difference between 2 colors. Returns a result between 0 and 255

Utility

difference : Color -> Color -> Basics.Float

The color difference between 2 colors. Returns a result between 0 and 765