# APCA Contrast Showcase


# How `navbar_color` Works

When you set `navbar_color` in your `great-docs.yml`, Great Docs uses the **APCA (Accessible Perceptual Contrast Algorithm)** to automatically determine whether the navbar text, icons, and controls should be **light** (white) or **dark** (black).

This page shows the algorithm's choices across **97 different background colors** spanning the entire spectrum.


## Configuration for This Site

This site uses per-mode navbar colors:

``` yaml
navbar_color:
  light: "#2c3e50"   # Charcoal (gets white text)
  dark: "#1a237e"    # Deep indigo (gets white text)
```

You can also set a single color for both modes:

``` yaml
navbar_color: steelblue
```


# Color Swatch Grid

Each row shows a background color with the APCA-selected text color rendered on top. The **Hex** and **Name** columns use the computed text color directly on the background, so you can judge readability at a glance.


|   Hex    | Name            | RGB              | Text Choice |
|:--------:|-----------------|------------------|-------------|
| \#FF0000 | Red             | rgb(255,0,0)     | white       |
| \#DC143C | Crimson         | rgb(220,20,60)   | white       |
| \#8B0000 | Dark Red        | rgb(139,0,0)     | white       |
| \#FF6347 | Tomato          | rgb(255,99,71)   | white       |
| \#CD5C5C | Indian Red      | rgb(205,92,92)   | white       |
| \#F08080 | Light Coral     | rgb(240,128,128) | white       |
| \#FF4500 | Orange Red      | rgb(255,69,0)    | white       |
| \#FF8C00 | Dark Orange     | rgb(255,140,0)   | black       |
| \#FFA500 | Orange          | rgb(255,165,0)   | black       |
| \#FF7F50 | Coral           | rgb(255,127,80)  | black       |
| \#E9967A | Dark Salmon     | rgb(233,150,122) | black       |
| \#FA8072 | Salmon          | rgb(250,128,114) | black       |
| \#FFD700 | Gold            | rgb(255,215,0)   | black       |
| \#FFFF00 | Yellow          | rgb(255,255,0)   | black       |
| \#F0E68C | Khaki           | rgb(240,230,140) | black       |
| \#FAFAD2 | Lt Goldenrod    | rgb(250,250,210) | black       |
| \#FFFACD | Lemon Chiffon   | rgb(255,250,205) | black       |
| \#EEE8AA | Pale Goldenrod  | rgb(238,232,170) | black       |
| \#006400 | Dark Green      | rgb(0,100,0)     | white       |
| \#008000 | Green           | rgb(0,128,0)     | white       |
| \#228B22 | Forest Green    | rgb(34,139,34)   | white       |
| \#2E8B57 | Sea Green       | rgb(46,139,87)   | white       |
| \#32CD32 | Lime Green      | rgb(50,205,50)   | black       |
| \#00FF00 | Lime            | rgb(0,255,0)     | black       |
| \#90EE90 | Light Green     | rgb(144,238,144) | black       |
| \#98FB98 | Pale Green      | rgb(152,251,152) | black       |
| \#ADFF2F | Green Yellow    | rgb(173,255,47)  | black       |
| \#008080 | Teal            | rgb(0,128,128)   | white       |
| \#008B8B | Dark Cyan       | rgb(0,139,139)   | white       |
| \#20B2AA | Lt Sea Green    | rgb(32,178,170)  | white       |
| \#00CED1 | Dark Turquoise  | rgb(0,206,209)   | black       |
| \#40E0D0 | Turquoise       | rgb(64,224,208)  | black       |
| \#00FFFF | Cyan            | rgb(0,255,255)   | black       |
| \#E0FFFF | Light Cyan      | rgb(224,255,255) | black       |
| \#000080 | Navy            | rgb(0,0,128)     | white       |
| \#00008B | Dark Blue       | rgb(0,0,139)     | white       |
| \#0000FF | Blue            | rgb(0,0,255)     | white       |
| \#191970 | Midnight Blue   | rgb(25,25,112)   | white       |
| \#4169E1 | Royal Blue      | rgb(65,105,225)  | white       |
| \#4682B4 | Steel Blue      | rgb(70,130,180)  | white       |
| \#1E90FF | Dodger Blue     | rgb(30,144,255)  | white       |
| \#6495ED | Cornflower Blue | rgb(100,149,237) | white       |
| \#87CEEB | Sky Blue        | rgb(135,206,235) | black       |
| \#ADD8E6 | Light Blue      | rgb(173,216,230) | black       |
| \#B0E0E6 | Powder Blue     | rgb(176,224,230) | black       |
| \#E3F2FD | Ice Blue        | rgb(227,242,253) | black       |
| \#4B0082 | Indigo          | rgb(75,0,130)    | white       |
| \#663399 | Rebecca Purple  | rgb(102,51,153)  | white       |
| \#800080 | Purple          | rgb(128,0,128)   | white       |
| \#8B008B | Dark Magenta    | rgb(139,0,139)   | white       |
| \#9370DB | Medium Purple   | rgb(147,112,219) | white       |
| \#BA55D3 | Medium Orchid   | rgb(186,85,211)  | white       |
| \#DA70D6 | Orchid          | rgb(218,112,214) | white       |
| \#DDA0DD | Plum            | rgb(221,160,221) | black       |
| \#E6E6FA | Lavender        | rgb(230,230,250) | black       |
| \#C71585 | Med Violet Red  | rgb(199,21,133)  | white       |
| \#FF1493 | Deep Pink       | rgb(255,20,147)  | white       |
| \#FF69B4 | Hot Pink        | rgb(255,105,180) | white       |
| \#FFB6C1 | Light Pink      | rgb(255,182,193) | black       |
| \#FFC0CB | Pink            | rgb(255,192,203) | black       |
| \#FFF0F5 | Lavender Blush  | rgb(255,240,245) | black       |
| \#8B4513 | Saddle Brown    | rgb(139,69,19)   | white       |
| \#A0522D | Sienna          | rgb(160,82,45)   | white       |
| \#D2691E | Chocolate       | rgb(210,105,30)  | white       |
| \#CD853F | Peru            | rgb(205,133,63)  | white       |
| \#DEB887 | Burlywood       | rgb(222,184,135) | black       |
| \#F5DEB3 | Wheat           | rgb(245,222,179) | black       |
| \#000000 | Black           | rgb(0,0,0)       | white       |
| \#1a1a1a | \#1a1a1a        | rgb(26,26,26)    | white       |
| \#333333 | \#333333        | rgb(51,51,51)    | white       |
| \#555555 | \#555555        | rgb(85,85,85)    | white       |
| \#696969 | Dim Gray        | rgb(105,105,105) | white       |
| \#808080 | Gray            | rgb(128,128,128) | white       |
| \#A9A9A9 | Dark Gray       | rgb(169,169,169) | black       |
| \#C0C0C0 | Silver          | rgb(192,192,192) | black       |
| \#D3D3D3 | Light Gray      | rgb(211,211,211) | black       |
| \#F5F5F5 | White Smoke     | rgb(245,245,245) | black       |
| \#FFFFFF | White           | rgb(255,255,255) | black       |
| \#2c3e50 | Charcoal        | rgb(44,62,80)    | white       |
| \#34495e | Wet Asphalt     | rgb(52,73,94)    | white       |
| \#1abc9c | Turquoise       | rgb(26,188,156)  | black       |
| \#2ecc71 | Emerald         | rgb(46,204,113)  | black       |
| \#3498db | Peter River     | rgb(52,152,219)  | white       |
| \#9b59b6 | Amethyst        | rgb(155,89,182)  | white       |
| \#e74c3c | Alizarin        | rgb(231,76,60)   | white       |
| \#f39c12 | Sun Flower      | rgb(243,156,18)  | black       |
| \#e67e22 | Carrot          | rgb(230,126,34)  | white       |
| \#ecf0f1 | Clouds          | rgb(236,240,241) | black       |
| \#bdc3c7 | Silver Cloud    | rgb(189,195,199) | black       |
| \#7f8c8d | Asbestos        | rgb(127,140,141) | white       |
| \#27ae60 | Nephritis       | rgb(39,174,96)   | white       |
| \#16a085 | Green Sea       | rgb(22,160,133)  | white       |
| \#2980b9 | Belize Hole     | rgb(41,128,185)  | white       |
| \#8e44ad | Wisteria        | rgb(142,68,173)  | white       |
| \#f1c40f | Sunflower       | rgb(241,196,15)  | black       |
| \#d35400 | Pumpkin         | rgb(211,84,0)    | white       |
| \#c0392b | Pomegranate     | rgb(192,57,43)   | white       |


# About the APCA Algorithm

The APCA (Accessible Perceptual Contrast Algorithm) is a modern replacement for the WCAG 2.x contrast ratio. Key advantages:

- **Perceptually uniform**: matches how humans actually perceive contrast, unlike the simple luminance ratio in WCAG 2.x.
- **Polarity-aware**: treats dark-on-light differently from light-on-dark, reflecting the asymmetry in human vision.
- **Better mid-range decisions**: WCAG 2.x often fails for medium-tone colors; APCA handles these correctly.

The implementation is ported from the [gt R package](https://github.com/rstudio/gt), using SAPC APCA Beta 0.0.98G-4g coefficients.