---------------------------------------------------------------------- This is the API documentation for the gdtest_navbar_color library. ---------------------------------------------------------------------- ## Functions Public functions contrast_ratio(bg_color: str, fg_color: str) -> float Compute the APCA contrast ratio between two colors. Parameters ---------- bg_color Background color as a hex string (e.g., ``"#2c3e50"``). fg_color Foreground (text) color as a hex string. Returns ------- float The APCA Lc contrast value. Higher absolute values indicate stronger contrast. Examples -------- >>> contrast_ratio("#000000", "#FFFFFF") 106.04 >>> contrast_ratio("#FFFFFF", "#000000") -107.88 ideal_text_color(bg_color: str) -> str Choose the best text color (light or dark) for a background. Uses the APCA algorithm to determine whether white or black text provides better contrast against the given background. Parameters ---------- bg_color Background color as a hex string or CSS named color. Returns ------- str Either ``"#FFFFFF"`` (white) or ``"#000000"`` (black). Examples -------- >>> ideal_text_color("#2c3e50") '#FFFFFF' >>> ideal_text_color("#e3f2fd") '#000000' >>> ideal_text_color("navy") '#FFFFFF' ---------------------------------------------------------------------- This is the User Guide documentation for the package. ---------------------------------------------------------------------- ## 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
#FF0000Redrgb(255,0,0)white
#DC143CCrimsonrgb(220,20,60)white
#8B0000Dark Redrgb(139,0,0)white
#FF6347Tomatorgb(255,99,71)white
#CD5C5CIndian Redrgb(205,92,92)white
#F08080Light Coralrgb(240,128,128)white
#FF4500Orange Redrgb(255,69,0)white
#FF8C00Dark Orangergb(255,140,0)black
#FFA500Orangergb(255,165,0)black
#FF7F50Coralrgb(255,127,80)black
#E9967ADark Salmonrgb(233,150,122)black
#FA8072Salmonrgb(250,128,114)black
#FFD700Goldrgb(255,215,0)black
#FFFF00Yellowrgb(255,255,0)black
#F0E68CKhakirgb(240,230,140)black
#FAFAD2Lt Goldenrodrgb(250,250,210)black
#FFFACDLemon Chiffonrgb(255,250,205)black
#EEE8AAPale Goldenrodrgb(238,232,170)black
#006400Dark Greenrgb(0,100,0)white
#008000Greenrgb(0,128,0)white
#228B22Forest Greenrgb(34,139,34)white
#2E8B57Sea Greenrgb(46,139,87)white
#32CD32Lime Greenrgb(50,205,50)black
#00FF00Limergb(0,255,0)black
#90EE90Light Greenrgb(144,238,144)black
#98FB98Pale Greenrgb(152,251,152)black
#ADFF2FGreen Yellowrgb(173,255,47)black
#008080Tealrgb(0,128,128)white
#008B8BDark Cyanrgb(0,139,139)white
#20B2AALt Sea Greenrgb(32,178,170)white
#00CED1Dark Turquoisergb(0,206,209)black
#40E0D0Turquoisergb(64,224,208)black
#00FFFFCyanrgb(0,255,255)black
#E0FFFFLight Cyanrgb(224,255,255)black
#000080Navyrgb(0,0,128)white
#00008BDark Bluergb(0,0,139)white
#0000FFBluergb(0,0,255)white
#191970Midnight Bluergb(25,25,112)white
#4169E1Royal Bluergb(65,105,225)white
#4682B4Steel Bluergb(70,130,180)white
#1E90FFDodger Bluergb(30,144,255)white
#6495EDCornflower Bluergb(100,149,237)white
#87CEEBSky Bluergb(135,206,235)black
#ADD8E6Light Bluergb(173,216,230)black
#B0E0E6Powder Bluergb(176,224,230)black
#E3F2FDIce Bluergb(227,242,253)black
#4B0082Indigorgb(75,0,130)white
#663399Rebecca Purplergb(102,51,153)white
#800080Purplergb(128,0,128)white
#8B008BDark Magentargb(139,0,139)white
#9370DBMedium Purplergb(147,112,219)white
#BA55D3Medium Orchidrgb(186,85,211)white
#DA70D6Orchidrgb(218,112,214)white
#DDA0DDPlumrgb(221,160,221)black
#E6E6FALavenderrgb(230,230,250)black
#C71585Med Violet Redrgb(199,21,133)white
#FF1493Deep Pinkrgb(255,20,147)white
#FF69B4Hot Pinkrgb(255,105,180)white
#FFB6C1Light Pinkrgb(255,182,193)black
#FFC0CBPinkrgb(255,192,203)black
#FFF0F5Lavender Blushrgb(255,240,245)black
#8B4513Saddle Brownrgb(139,69,19)white
#A0522DSiennargb(160,82,45)white
#D2691EChocolatergb(210,105,30)white
#CD853FPerurgb(205,133,63)white
#DEB887Burlywoodrgb(222,184,135)black
#F5DEB3Wheatrgb(245,222,179)black
#000000Blackrgb(0,0,0)white
#1a1a1a#1a1a1argb(26,26,26)white
#333333#333333rgb(51,51,51)white
#555555#555555rgb(85,85,85)white
#696969Dim Grayrgb(105,105,105)white
#808080Grayrgb(128,128,128)white
#A9A9A9Dark Grayrgb(169,169,169)black
#C0C0C0Silverrgb(192,192,192)black
#D3D3D3Light Grayrgb(211,211,211)black
#F5F5F5White Smokergb(245,245,245)black
#FFFFFFWhitergb(255,255,255)black
#2c3e50Charcoalrgb(44,62,80)white
#34495eWet Asphaltrgb(52,73,94)white
#1abc9cTurquoisergb(26,188,156)black
#2ecc71Emeraldrgb(46,204,113)black
#3498dbPeter Riverrgb(52,152,219)white
#9b59b6Amethystrgb(155,89,182)white
#e74c3cAlizarinrgb(231,76,60)white
#f39c12Sun Flowerrgb(243,156,18)black
#e67e22Carrotrgb(230,126,34)white
#ecf0f1Cloudsrgb(236,240,241)black
#bdc3c7Silver Cloudrgb(189,195,199)black
#7f8c8dAsbestosrgb(127,140,141)white
#27ae60Nephritisrgb(39,174,96)white
#16a085Green Seargb(22,160,133)white
#2980b9Belize Holergb(41,128,185)white
#8e44adWisteriargb(142,68,173)white
#f1c40fSunflowerrgb(241,196,15)black
#d35400Pumpkinrgb(211,84,0)white
#c0392bPomegranatergb(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.