Power Apps Color Functions

Summary

Functions that calculate the contrast between two colors and simulate colors for people with differnt types of color blindness.

The following image shows a sample implementation of Color Functions component to create a color contrast checker when added to Power App:

Contrast Checker

The new Color Blind Color Checker page converts a color to simulate different types of color blindness allowing you to see what your users see

Color Blind Color Checker

Example Accessibility Checker dashboard using the color-functions: Color Accessibility Checker Dashboard

Applies to

Power Apps Canvas app

Solution

Solution	Author(s)
Color Functions	P3N

Version history

Version	Date	Comments
2.0	Nov 2, 2021	Color Blind Functions

Functions

Functions that perform operations on colors

sRGBtoLIn
getLuminance
chkContrast
ProtanopiaColor
ProtanomalyColor
DeuteranopiaColor
DeuteranomalyColor
TritanopiaColor
TritanomalyColor
AchromatopsiaColor
AchromatomalyColor

sRGBtoLIn

Linearizes an R G or B value,using the following formula:

If(
    Sum(colorChannel / 255) <= 0.03928,
    Sum(colorChannel / 255) / 12.92,
    Power(
        ((Sum(colorChannel / 255) + 0.055) / 1.055),
        2.4
    )
)

Syntax

sRGB(colorChannel)

Parameter	Description	Required	Type
`colorChannel`	Linearizes an R G or B value	Yes	Number

Output

Number

getLuminance

Calculates the relative luminance of linearized RGB colors using the following formula:

Sum(
    ('color-functions'.sRGBtoLIN(R) * 0.2126) + 
    ('color-functions'.sRGBtoLIN(G) * 0.7152) + 
    ('color-functions'.sRGBtoLIN(B) * 0.0722)
)

Syntax

getLuminance(R,G,B)

Parameter	Description	Required	Type
`R`	Linearized R Value	Yes	Number
`G`	Linearized G Value	Yes	Number
`B`	Linearized B Value	Yes	Number

Output

Number between 0 and 1

chkContrast

Calculates the contrast between two colors using the following formula:

If(
    // Check which Value is higher, calculation then is (darkColor+0.05) / (lightColor+0.05)
    LightColor >DarkColor,
    Text(
        Sum((LightColor + 0.05) / (DarkColor + 0.05)),
        "[$-en-GB]#.000"
    ),
    Text(
        Sum((DarkColor + 0.05) / (LightColor + 0.05)),
        "[$-en-GB]#.000"
    )
)

Syntax

chkContrast(DarkColor,LightColor)

Parameter	Description	Required	Type
`DarkColor`	Dark color relative luminance	Yes	Number
`LightColor`	Light color relative luminance	Yes	Number

Output

Number between 1 and 21

ProtanopiaColor

Takes R G and B values and simulates Protanopia color-blindness and returns the RGBA value:

// Return Protanopia RGB Color 
RGBA(
      (R * 56.667 / 100.0 + G * 43.333 / 100.0 + B * 0 / 100.0),
      (R * 55.833 / 100.0 + G * 44.167 / 100.0 + B * 0 / 100.0),
      (R * 0 / 100.0 + G * 24.167 / 100.0 + B * 75.833 / 100.0),1
  )
/*
Protanopia: 
R:[56.667, 43.333,      0]
G:[55.833, 44.167,      0]
B:[     0, 24.167, 75.833]

*/

Syntax

ProtanopiaColor(R,G,B)

Parameter	Description	Required	Type
`R`	R Value	Yes	Number
`G`	G Value	Yes	Number
`B`	B Value	Yes	Number

Output

Color

ProtanomalyColor

Takes R G and B values and simulates Protanomaly color-blindness and returns the RGBA value:

// Return Protanomaly RGB Color 
RGBA(
      (R * 81.667 / 100.0 + G * 18.333 / 100.0 + B * 0 / 100.0),
      (R * 33.333 / 100.0 + G * 66.667 / 100.0 + B * 0 / 100.0),
      (R * 0 / 100.0 + G * 12.5 / 100.0 + B * 87.5 / 100.0),1
  )

/*
Protanomaly:  
R:[81.667, 18.333,    0]
G:[33.333, 66.667,    0]
B:[     0    12.5, 87.5]

*/

Syntax

ProtanomalyColor(R,G,B)

Parameter	Description	Required	Type
`R`	R Value	Yes	Number
`G`	G Value	Yes	Number
`B`	B Value	Yes	Number

Output

Color

DeuteranopiaColor

Takes R G and B values and simulates Deuteranopia color-blindness and returns the RGBA value:

// Return Deuteranopia RGB Color 
RGBA(
      (R * 62.5 / 100.0 + G * 37.5 / 100.0 + B * 0 / 100.0),
      (R * 70 / 100.0 + G * 30 / 100.0 + B * 0 / 100.0),
      (R * 0 / 100.0 + G * 30 / 100.0 + B * 70 / 100.0),1
  )

/*

 Deuteranopia: 
    R:[62.5, 37.5,  0]
    G:[70,   30,    0]
    B: [0,   30,   70]
*/

Syntax

DeuteranopiaColor(R,G,B)

Parameter	Description	Required	Type
`R`	R Value	Yes	Number
`G`	G Value	Yes	Number
`B`	B Value	Yes	Number

Output

Color

DeuteranomalyColor

Takes R G and B values and simulates Deuteranomaly color-blindness and returns the RGBA value:

// Return Deuteranomaly RGB Color 
RGBA(
      (R * 80 / 100.0 + G * 20 / 100.0 + B * 0 / 100.0),
      (R * 25.833 / 100.0 + G * 74.167 / 100.0 + B * 0 / 100.0),
      (R * 0 / 100.0 + G * 14.167 / 100.0 + B * 85.833 / 100.0),1
  )

/*
Deuteranomaly:
R:[80,     20,      0]
G:[25.833, 74.167,  0]
B: [0,     14.167, 85.833]
*/

Syntax

DeuteranomalyColor(R,G,B)

Parameter	Description	Required	Type
`R`	R Value	Yes	Number
`G`	G Value	Yes	Number
`B`	B Value	Yes	Number

Output

Color

TritanopiaColor

Takes R G and B values and simulates Tritanopia color-blindness and returns the RGBA value:

// Return Tritanopia RGB Color 
RGBA(
      (R * 95 / 100.0 + G * 5 / 100.0 + B * 0 / 100.0),
      (R * 0 / 100.0 + G * 43.333 / 100.0 + B * 56.667 / 100.0),
      (R * 0 / 100.0 + G * 47.5 / 100.0 + B * 52.5 / 100.0),1
  )
/*
Tritanopia:   {
R:[95,  5,      0],
G: [0, 43.333, 56.667],
B: [0, 47.5,   52.5]
*/

Syntax

TritanopiaColor(R,G,B)

Parameter	Description	Required	Type
`R`	R Value	Yes	Number
`G`	G Value	Yes	Number
`B`	B Value	Yes	Number

Output

Color

TritanomalyColor

Takes R G and B values and simulates Tritanomaly color-blindness and returns the RGBA value:

// Return Tritanomaly RGB Color 
RGBA(
      (R * 96.667 / 100.0 + G * 3.333 / 100.0 + B * 0 / 100.0),
      (R * 0 / 100.0 + G * 73.333 / 100.0 + B * 26.667 / 100.0),
      (R * 0 / 100.0 + G * 18.333 / 100.0 + B * 81.667 / 100.0),1
  )
/*
Tritanomaly:  {
R:[96.667, 3.333,   0],
G: [0,     73.333, 26.667],
B: [0,     18.333, 81.667]
*/

Syntax

TritanomalyColor(R,G,B)

Parameter	Description	Required	Type
`R`	R Value	Yes	Number
`G`	G Value	Yes	Number
`B`	B Value	Yes	Number

Output

Color

AchromatopsiaColor

Takes R G and B values and simulates Achromatopsia color-blindness and returns the RGBA value:

// Return Achromatopsia RGB Color 
RGBA(
      (R * 29.9 / 100.0 + G * 58.7 / 100.0 + B * 11.4 / 100.0),
      (R * 29.9 / 100.0 + G * 58.7 / 100.0 + B * 11.4 / 100.0),
      (R * 29.9 / 100.0 + G * 58.7 / 100.0 + B * 11.4 / 100.0),1
  )
/*
Achromatopsia:
R:[29.9, 58.7, 11.4]
G:[29.9, 58.7, 11.4]
B:[29.9, 58.7, 11.4]
    */

Syntax

AchromatopsiaColor(R,G,B)

Parameter	Description	Required	Type
`R`	R Value	Yes	Number
`G`	G Value	Yes	Number
`B`	B Value	Yes	Number

Output

Color

AchromatomalyColor

Takes R G and B values and simulates Achromatomaly color-blindness and returns the RGBA value:

// Return Achromatomaly RGB Color 
RRGBA(
      (R * 61.8 / 100.0 + G * 32 / 100.0 + B * 6.2 / 100.0),
      (R * 16.3 / 100.0 + G * 77.5 / 100.0 + B * 6.2 / 100.0),
      (R * 16.3 / 100.0 + G * 32.0 / 100.0 + B * 51.6 / 100.0),1
  )
/*
Achromatomaly:
R:[61.8, 32,    6.2]
G:[16.3, 77.5,  6.2]
B:[16.3, 32.0, 51.6]
*/

Syntax

AchromatomalyColor(R,G,B)

Parameter	Description	Required	Type
`R`	R Value	Yes	Number
`G`	G Value	Yes	Number
`B`	B Value	Yes	Number

Output

Color

Summary

Applies to

Solution

Version history

Functions

sRGBtoLIn

Syntax

Output

getLuminance

Syntax

Output

chkContrast

Syntax

Output

ProtanopiaColor

Syntax

Output

ProtanomalyColor

Syntax

Output

DeuteranopiaColor

Syntax

Output

DeuteranomalyColor

Syntax

Output

TritanopiaColor

Syntax

Output

TritanomalyColor

Syntax

Output

AchromatopsiaColor

Syntax

Output

AchromatomalyColor

Syntax

Output

On This Page

FEATURED TAGS