APCA Contrast Showcase
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, using SAPC APCA Beta 0.0.98G-4g coefficients.