Default Admin Color Report - Focus Only
This page focuses exclusively on focus indicator visibility. Each cell measures focus-to-unfocused-state contrast at the 3:1 threshold per WCAG 2.2 SC 2.4.11.
Focus Combination Grid
These combinations isolate focus visibility. Focus indicator visibility must meet 3:1 contrast against the unfocused state.
| Focus preset | Light / Increase Contrast Off | Dark / Increase Contrast Off | Dark / Increase Contrast On | Light / Increase Contrast On |
|---|---|---|---|---|
|
Default Admin Focus color (Default)
Preset: rgb(0, 125, 250)
Light: #007DFA
Dark: #51A8FF
|
2.22:1
Fail
#007DFA on #FAFAFF
|
6.87:1
AA
#51A8FF on #1B1B1D
|
13.08:1
AA
#FFFFFF on #000000
|
10.10:1
AA
#000000 on #D9DBDE
|
|
Green
Preset: rgb(8, 163, 144)
Light: #08A38F
Dark: #08A38F
|
1.94:1
Fail
#08A38F on #FAFAFF
|
2.76:1
Fail
#08A38F on #1B1B1D
|
13.08:1
AA
#FFFFFF on #000000
|
10.10:1
AA
#000000 on #D9DBDE
|
|
Claro Green
Preset: rgb(38, 167, 105)
Light: #26A769
Dark: #26A769
|
1.89:1
Fail
#26A769 on #FAFAFF
|
2.82:1
Fail
#26A769 on #1B1B1D
|
13.08:1
AA
#FFFFFF on #000000
|
10.10:1
AA
#000000 on #D9DBDE
|
|
Orange
Preset: rgb(236, 124, 87)
Light: #ED7B57
Dark: #ED7B57
|
1.79:1
Fail
#ED7B57 on #FAFAFF
|
3.04:1
AA
#ED7B57 on #1B1B1D
|
13.08:1
AA
#FFFFFF on #000000
|
10.10:1
AA
#000000 on #D9DBDE
|
|
Neutral
Preset: rgb(0, 0, 0)
Light: #000000
Dark: #FFFFFF
|
2.83:1
Fail
#000000 on #FAFAFF
|
11.31:1
AA
#FFFFFF on #1B1B1D
|
13.08:1
AA
#FFFFFF on #000000
|
10.10:1
AA
#000000 on #D9DBDE
|
|
Same as Accent color
Preset: auto
Light: #000000
Dark: #FFFFFF
|
20.18:1
AA
#000000 on #FAFAFF
|
17.20:1
AA
#FFFFFF on #1B1B1D
|
13.08:1
AA
#FFFFFF on #000000
|
10.10:1
AA
#000000 on #D9DBDE
|
Focus Token Grids
Matrix: Focus Tokens
Rows are foreground tokens. Columns are background tokens. Each cell shows worst-case observed contrast across sampled states/presets.
| Foreground Background | var(--gin-bg-app) | var(--gin-bg-layer) | var(--button-bg-color--primary) | var(--gin-color-primary) | var(--gin-color-primary-light) | var(--accent-base) | var(--accent-color-500) | var(--accent-color-030) |
|---|---|---|---|---|---|---|---|---|
var(--gin-color-focus) |
1.79:1
Fail
FG #ED7B57
BG #FAFAFF
|
1.82:1
Fail
FG #ED7B57
BG #FFFFFF
|
1.18:1
Fail
FG #007DFA
BG #015EFE
|
1.18:1
Fail
FG #007DFA
BG #015EFE
|
1.17:1
Fail
FG #007DFA
BG #005EFF
|
1.18:1
Fail
FG #007DFA
BG #015EFE
|
1.18:1
Fail
FG #007DFA
BG #015EFE
|
1.17:1
Fail
FG #007DFA
BG #005EFF
|
var(--gin-color-focus-border) |
1.00:1
Fail
FG #000000
BG #000000
|
1.40:1
Fail
FG #000000
BG #2A2A2D
|
1.40:1
Fail
FG #000000
BG #015EFE
|
1.40:1
Fail
FG #000000
BG #015EFE
|
1.40:1
Fail
FG #000000
BG #005EFF
|
1.40:1
Fail
FG #000000
BG #015EFE
|
1.40:1
Fail
FG #000000
BG #015EFE
|
1.40:1
Fail
FG #000000
BG #005EFF
|
var(--color-focus) |
1.54:1
Fail
FG #ED7B57
BG #D9DBDE
|
1.82:1
Fail
FG #ED7B57
BG #FFFFFF
|
1.18:1
Fail
FG #007DFA
BG #015EFE
|
1.18:1
Fail
FG #007DFA
BG #015EFE
|
1.17:1
Fail
FG #007DFA
BG #005EFF
|
1.18:1
Fail
FG #007DFA
BG #015EFE
|
1.18:1
Fail
FG #007DFA
BG #015EFE
|
1.17:1
Fail
FG #007DFA
BG #005EFF
|
var(--focus-ring) [color extracted] |
1.00:1
Fail
FG #1B1B1D
BG #1B1B1D
|
1.20:1
Fail
FG #1B1B1D
BG #2A2A2D
|
1.18:1
Fail
FG #007DFA
BG #015EFE
|
1.18:1
Fail
FG #007DFA
BG #015EFE
|
1.17:1
Fail
FG #007DFA
BG #005EFF
|
1.18:1
Fail
FG #007DFA
BG #015EFE
|
1.18:1
Fail
FG #007DFA
BG #015EFE
|
1.17:1
Fail
FG #007DFA
BG #005EFF
|
Focus Token Combinations (3:1 minimum)
| Foreground token | Background token | Worst observed ratio | Threshold 3.0:1 | Worst-case sample |
|---|---|---|---|---|
var(--gin-color-focus)
Intended role: focus
|
var(--gin-bg-app)
Intended role: background
|
1.79:1
Fail
#ED7B57 on #FAFAFF
|
Fail | Light / Increase Contrast Off / Focus: Orange |
var(--gin-color-focus)
Intended role: focus
|
var(--gin-bg-layer)
Intended role: background
|
1.82:1
Fail
#ED7B57 on #FFFFFF
|
Fail | Light / Increase Contrast Off / Focus: Orange |
var(--gin-color-focus)
Intended role: focus
|
var(--button-bg-color--primary)
Intended role: background
|
1.18:1
Fail
#007DFA on #015EFE
|
Fail | Light / Increase Contrast Off / Focus: Default Admin Focus color (Default) |
var(--gin-color-focus)
Intended role: focus
|
var(--gin-color-primary)
Intended role: accent
|
1.18:1
Fail
#007DFA on #015EFE
|
Fail | Light / Increase Contrast Off / Focus: Default Admin Focus color (Default) |
var(--gin-color-focus)
Intended role: focus
|
var(--gin-color-primary-light)
Intended role: accent
|
1.17:1
Fail
#007DFA on #005EFF
|
Fail | Light / Increase Contrast Off / Focus: Default Admin Focus color (Default) |
var(--gin-color-focus)
Intended role: focus
|
var(--accent-base)
Intended role: accent base
|
1.18:1
Fail
#007DFA on #015EFE
|
Fail | Light / Increase Contrast Off / Focus: Default Admin Focus color (Default) |
var(--gin-color-focus)
Intended role: focus
|
var(--accent-color-500)
Intended role: accent
|
1.18:1
Fail
#007DFA on #015EFE
|
Fail | Light / Increase Contrast Off / Focus: Default Admin Focus color (Default) |
var(--gin-color-focus)
Intended role: focus
|
var(--accent-color-030)
Intended role: accent tint
|
1.17:1
Fail
#007DFA on #005EFF
|
Fail | Light / Increase Contrast Off / Focus: Default Admin Focus color (Default) |
var(--gin-color-focus-border)
Intended role: focus border
|
var(--gin-bg-app)
Intended role: background
|
1.00:1
Fail
#000000 on #000000
|
Fail | Dark / Increase Contrast On / Focus: Default Admin Focus color (Default) |
var(--gin-color-focus-border)
Intended role: focus border
|
var(--gin-bg-layer)
Intended role: background
|
1.40:1
Fail
#000000 on #2A2A2D
|
Fail | Dark / Increase Contrast Off / Focus: Default Admin Focus color (Default) |
var(--gin-color-focus-border)
Intended role: focus border
|
var(--button-bg-color--primary)
Intended role: background
|
1.40:1
Fail
#000000 on #015EFE
|
Fail | Light / Increase Contrast Off / Focus: Default Admin Focus color (Default) |
var(--gin-color-focus-border)
Intended role: focus border
|
var(--gin-color-primary)
Intended role: accent
|
1.40:1
Fail
#000000 on #015EFE
|
Fail | Light / Increase Contrast Off / Focus: Default Admin Focus color (Default) |
var(--gin-color-focus-border)
Intended role: focus border
|
var(--gin-color-primary-light)
Intended role: accent
|
1.40:1
Fail
#000000 on #005EFF
|
Fail | Light / Increase Contrast Off / Focus: Default Admin Focus color (Default) |
var(--gin-color-focus-border)
Intended role: focus border
|
var(--accent-base)
Intended role: accent base
|
1.40:1
Fail
#000000 on #015EFE
|
Fail | Light / Increase Contrast Off / Focus: Default Admin Focus color (Default) |
var(--gin-color-focus-border)
Intended role: focus border
|
var(--accent-color-500)
Intended role: accent
|
1.40:1
Fail
#000000 on #015EFE
|
Fail | Light / Increase Contrast Off / Focus: Default Admin Focus color (Default) |
var(--gin-color-focus-border)
Intended role: focus border
|
var(--accent-color-030)
Intended role: accent tint
|
1.40:1
Fail
#000000 on #005EFF
|
Fail | Light / Increase Contrast Off / Focus: Default Admin Focus color (Default) |
var(--color-focus)
Intended role: focus
|
var(--gin-bg-app)
Intended role: background
|
1.54:1
Fail
#ED7B57 on #D9DBDE
|
Fail | Light / Increase Contrast On / Focus: Orange |
var(--color-focus)
Intended role: focus
|
var(--gin-bg-layer)
Intended role: background
|
1.82:1
Fail
#ED7B57 on #FFFFFF
|
Fail | Light / Increase Contrast Off / Focus: Orange |
var(--color-focus)
Intended role: focus
|
var(--button-bg-color--primary)
Intended role: background
|
1.18:1
Fail
#007DFA on #015EFE
|
Fail | Light / Increase Contrast Off / Focus: Default Admin Focus color (Default) |
var(--color-focus)
Intended role: focus
|
var(--gin-color-primary)
Intended role: accent
|
1.18:1
Fail
#007DFA on #015EFE
|
Fail | Light / Increase Contrast Off / Focus: Default Admin Focus color (Default) |
var(--color-focus)
Intended role: focus
|
var(--gin-color-primary-light)
Intended role: accent
|
1.17:1
Fail
#007DFA on #005EFF
|
Fail | Light / Increase Contrast Off / Focus: Default Admin Focus color (Default) |
var(--color-focus)
Intended role: focus
|
var(--accent-base)
Intended role: accent base
|
1.18:1
Fail
#007DFA on #015EFE
|
Fail | Light / Increase Contrast Off / Focus: Default Admin Focus color (Default) |
var(--color-focus)
Intended role: focus
|
var(--accent-color-500)
Intended role: accent
|
1.18:1
Fail
#007DFA on #015EFE
|
Fail | Light / Increase Contrast Off / Focus: Default Admin Focus color (Default) |
var(--color-focus)
Intended role: focus
|
var(--accent-color-030)
Intended role: accent tint
|
1.17:1
Fail
#007DFA on #005EFF
|
Fail | Light / Increase Contrast Off / Focus: Default Admin Focus color (Default) |
var(--focus-ring) [color extracted]
Intended role: focus effect
|
var(--gin-bg-app)
Intended role: background
|
1.00:1
Fail
#1B1B1D on #1B1B1D
ring effect: rgb(27, 27, 29) 0px 0px 0px 1px, rgb(81, 168, 255) 0px 0px 0px 4px
|
Fail | Dark / Increase Contrast Off / Focus: Default Admin Focus color (Default) |
var(--focus-ring) [color extracted]
Intended role: focus effect
|
var(--gin-bg-layer)
Intended role: background
|
1.20:1
Fail
#1B1B1D on #2A2A2D
ring effect: rgb(27, 27, 29) 0px 0px 0px 1px, rgb(81, 168, 255) 0px 0px 0px 4px
|
Fail | Dark / Increase Contrast Off / Focus: Default Admin Focus color (Default) |
var(--focus-ring) [color extracted]
Intended role: focus effect
|
var(--button-bg-color--primary)
Intended role: background
|
1.18:1
Fail
#007DFA on #015EFE
ring effect: lch(98.3275 2.7667 288.155) 0px 0px 0px 1px, rgba(0, 125, 250, 0.6) 0px 0px 0px 4px
|
Fail | Light / Increase Contrast Off / Focus: Default Admin Focus color (Default) |
var(--focus-ring) [color extracted]
Intended role: focus effect
|
var(--gin-color-primary)
Intended role: accent
|
1.18:1
Fail
#007DFA on #015EFE
ring effect: lch(98.3275 2.7667 288.155) 0px 0px 0px 1px, rgba(0, 125, 250, 0.6) 0px 0px 0px 4px
|
Fail | Light / Increase Contrast Off / Focus: Default Admin Focus color (Default) |
var(--focus-ring) [color extracted]
Intended role: focus effect
|
var(--gin-color-primary-light)
Intended role: accent
|
1.17:1
Fail
#007DFA on #005EFF
ring effect: lch(98.3275 2.7667 288.155) 0px 0px 0px 1px, rgba(0, 125, 250, 0.6) 0px 0px 0px 4px
|
Fail | Light / Increase Contrast Off / Focus: Default Admin Focus color (Default) |
var(--focus-ring) [color extracted]
Intended role: focus effect
|
var(--accent-base)
Intended role: accent base
|
1.18:1
Fail
#007DFA on #015EFE
ring effect: lch(98.3275 2.7667 288.155) 0px 0px 0px 1px, rgba(0, 125, 250, 0.6) 0px 0px 0px 4px
|
Fail | Light / Increase Contrast Off / Focus: Default Admin Focus color (Default) |
var(--focus-ring) [color extracted]
Intended role: focus effect
|
var(--accent-color-500)
Intended role: accent
|
1.18:1
Fail
#007DFA on #015EFE
ring effect: lch(98.3275 2.7667 288.155) 0px 0px 0px 1px, rgba(0, 125, 250, 0.6) 0px 0px 0px 4px
|
Fail | Light / Increase Contrast Off / Focus: Default Admin Focus color (Default) |
var(--focus-ring) [color extracted]
Intended role: focus effect
|
var(--accent-color-030)
Intended role: accent tint
|
1.17:1
Fail
#007DFA on #005EFF
ring effect: lch(98.3275 2.7667 288.155) 0px 0px 0px 1px, rgba(0, 125, 250, 0.6) 0px 0px 0px 4px
|
Fail | Light / Increase Contrast Off / Focus: Default Admin Focus color (Default) |