LibreUni UX Report

main / desktop

Home (Modern Light)

http://127.0.0.1:4321/

0 critical
1 warnings

Viewport 1440x1000 Scroll 1440x2984 11 interactive elements sampled

Overall

98%

Color-Blind Friendly

100%

User Friendly

98%

Layout

100%

Tap/Click Targets

95%

WCAG Contrast

100%

Findings

Severity	Type	Message	Selector
warning	target-size	Interactive target is 42px on its smallest side; recommended target is 44px	`astro-island > div.relative.w-full > div.relative > input.input-field.pl-11`

Lowest Contrast Samples

Selector	Text	Background	WCAG	APCA	Worst CVD
`p.mt-8.max-w-2xl`	#64748b	#ffffff	4.76 / 3	73 / 45	protanopia 4.75
`a.group.inline-flex`	#ffffff	#2563eb	5.17 / 4.5	80.2 / 60	protanopia 5.18
`a.flex.min-h-11`	#0f172a	#ffffff	17.85 / 4.5	104.6 / 60	protanopia 17.83
`span.text-lg.md\:text-xl`	#0f172a	#ffffff	17.85 / 3	104.6 / 45	protanopia 17.83
`a.min-h-11.px-4`	#0f172a	#ffffff	17.85 / 4.5	104.6 / 60	protanopia 17.83
`h1.max-w-4xl.text-5xl`	#0f172a	#ffffff	17.85 / 3	104.6 / 45	protanopia 17.83
`a.group.inline-flex`	#0f172a	#ffffff	17.85 / 4.5	104.6 / 60	protanopia 17.83

main / desktop

Python Lesson (Monochrome Light)

http://127.0.0.1:4321/lessons/python/intro.html

0 critical
4 warnings

Viewport 1440x1000 Scroll 1440x3984 22 interactive elements sampled

Overall

92%

Color-Blind Friendly

100%

User Friendly

96%

Layout

96%

Tap/Click Targets

92%

WCAG Contrast

100%

Python Lesson (Monochrome Light) desktop screenshot

Findings

Severity	Type	Message	Selector
warning	target-size	Interactive target is 42px on its smallest side; recommended target is 44px	`astro-island > div.relative.w-full > div.relative > input.input-field.pl-11`
warning	target-size	Interactive target is 36px on its smallest side; recommended target is 44px	`#sidebar-collapse`
warning	target-size	Interactive target is 42px on its smallest side; recommended target is 44px	`div.flex.min-h-screen:nth-of-type(3) > aside.fixed.inset-y-0 > div.py-8.flex > a.mb-5.rounded-xl:nth-of-type(1)`
warning	heading-landmark	Viewport has 2 visible h1 elements; expected 1	aside.fixed.inset-y-0 > div.py-8.flex > div.hidden.md\:flex:nth-of-type(2) > h2.text-\[10px\].font-black, div.flex.min-h-screen:nth-of-type(3) > aside.fixed.inset-y-0 > div.py-8.flex > h3.px-4.py-3:nth-of-type(1), div.flex.min-h-screen:nth-of-type(3) > aside.fixed.inset-y-0 > div.py-8.flex > h3.px-4.py-3:nth-of-type(2), div.flex.min-h-screen:nth-of-type(3) > aside.fixed.inset-y-0 > div.py-8.flex > h3.px-4.py-3:nth-of-type(3), div.flex.min-h-screen:nth-of-type(3) > aside.fixed.inset-y-0 > div.py-8.flex > h3.px-4.py-3:nth-of-type(4), div.flex.min-h-screen:nth-of-type(3) > aside.fixed.inset-y-0 > div.py-8.flex > h3.px-4.py-3:nth-of-type(5), div.flex.min-h-screen:nth-of-type(3) > aside.fixed.inset-y-0 > div.py-8.flex > h3.px-4.py-3:nth-of-type(6), div.flex.min-h-screen:nth-of-type(3) > aside.fixed.inset-y-0 > div.py-8.flex > h3.px-4.py-3:nth-of-type(7)

Lowest Contrast Samples

Selector	Text	Background	WCAG	APCA	Worst CVD
`h2.text-\[10px\].font-black`	#525252	#f6f6f6	7.23 / 4.5	81.8 / 60	protanopia 7.19
`a.sidebar-lesson-link.min-h-11`	#525252	#f6f6f6	7.23 / 4.5	81.8 / 60	protanopia 7.19
`span.text-light-muted.dark\:text-dark-muted`	#525252	#ffffff	7.81 / 4.5	87.2 / 60	protanopia 7.76
`span.truncate.text-\[11px\]`	#525252	#ffffff	7.81 / 4.5	87.2 / 60	protanopia 7.76
`a.flex.items-center`	#ffffff	#171717	17.93 / 4.5	106.9 / 60	protanopia 17.89
`span.text-\[10px\].uppercase`	#ffffff	#171717	17.93 / 4.5	106.9 / 60	protanopia 17.89
`a.sidebar-lesson-link.min-h-11`	#ffffff	#171717	17.93 / 4.5	106.9 / 60	protanopia 17.89
`a.inline-flex.min-h-11`	#171717	#ffffff	17.93 / 4.5	104.7 / 60	protanopia 17.89
`a.mb-5.rounded-xl`	#0a0a0a	#f6f6f6	18.32 / 4.5	100.5 / 60	deuteranopia 18.28
`a.flex.min-h-11`	#0a0a0a	#ffffff	19.8 / 4.5	105.8 / 60	tritanopia 19.79

main / desktop

Python Lesson (Monochrome Dark)

http://127.0.0.1:4321/lessons/python/intro.html

0 critical
8 warnings

Viewport 1440x1000 Scroll 1440x3984 22 interactive elements sampled

Overall

85%

Color-Blind Friendly

100%

User Friendly

96%

Layout

96%

Tap/Click Targets

92%

WCAG Contrast

100%

Python Lesson (Monochrome Dark) desktop screenshot

Findings

Severity	Type	Message	Selector
warning	target-size	Interactive target is 42px on its smallest side; recommended target is 44px	`astro-island > div.relative.w-full > div.relative > input.input-field.pl-11`
warning	target-size	Interactive target is 36px on its smallest side; recommended target is 44px	`#sidebar-collapse`
warning	target-size	Interactive target is 42px on its smallest side; recommended target is 44px	`div.flex.min-h-screen:nth-of-type(3) > aside.fixed.inset-y-0 > div.py-8.flex > a.mb-5.rounded-xl:nth-of-type(1)`
warning	heading-landmark	Viewport has 2 visible h1 elements; expected 1	aside.fixed.inset-y-0 > div.py-8.flex > div.hidden.md\:flex:nth-of-type(2) > h2.text-\[10px\].font-black, div.flex.min-h-screen:nth-of-type(3) > aside.fixed.inset-y-0 > div.py-8.flex > h3.px-4.py-3:nth-of-type(1), div.flex.min-h-screen:nth-of-type(3) > aside.fixed.inset-y-0 > div.py-8.flex > h3.px-4.py-3:nth-of-type(2), div.flex.min-h-screen:nth-of-type(3) > aside.fixed.inset-y-0 > div.py-8.flex > h3.px-4.py-3:nth-of-type(3), div.flex.min-h-screen:nth-of-type(3) > aside.fixed.inset-y-0 > div.py-8.flex > h3.px-4.py-3:nth-of-type(4), div.flex.min-h-screen:nth-of-type(3) > aside.fixed.inset-y-0 > div.py-8.flex > h3.px-4.py-3:nth-of-type(5), div.flex.min-h-screen:nth-of-type(3) > aside.fixed.inset-y-0 > div.py-8.flex > h3.px-4.py-3:nth-of-type(6), div.flex.min-h-screen:nth-of-type(3) > aside.fixed.inset-y-0 > div.py-8.flex > h3.px-4.py-3:nth-of-type(7)
warning	apca-contrast	APCA contrast 49.2 is below the modern readability target 60	`h2.text-\[10px\].font-black`
warning	apca-contrast	APCA contrast 49.2 is below the modern readability target 60	`a.sidebar-lesson-link.min-h-11`
warning	apca-contrast	APCA contrast 51.3 is below the modern readability target 60	`span.text-light-muted.dark\:text-dark-muted`
warning	apca-contrast	APCA contrast 51.3 is below the modern readability target 60	`span.truncate.text-\[11px\]`

Lowest Contrast Samples

Selector	Text	Background	WCAG	APCA	Worst CVD
`h2.text-\[10px\].font-black`	#a3a3a3	#272727	5.92 / 4.5	49.2 / 60	protanopia 5.9
`a.sidebar-lesson-link.min-h-11`	#a3a3a3	#272727	5.92 / 4.5	49.2 / 60	protanopia 5.9
`span.text-light-muted.dark\:text-dark-muted`	#a3a3a3	#181818	7.04 / 4.5	51.3 / 60	tritanopia 7.02
`span.truncate.text-\[11px\]`	#a3a3a3	#181818	7.04 / 4.5	51.3 / 60	tritanopia 7.02
`a.flex.min-h-11`	#f5f5f5	#272727	13.7 / 4.5	98 / 60	deuteranopia 13.67
`span.text-lg.md\:text-xl`	#f5f5f5	#272727	13.7 / 3	98 / 45	deuteranopia 13.67
`a.min-h-11.px-4`	#f5f5f5	#272727	13.7 / 4.5	98 / 60	deuteranopia 13.67
`a.mb-5.rounded-xl`	#f5f5f5	#272727	13.7 / 4.5	98 / 60	deuteranopia 13.67
`a.flex.items-center`	#181818	#e5e5e5	14.1 / 4.5	89.2 / 60	deuteranopia 14.07
`span.text-\[10px\].uppercase`	#181818	#e5e5e5	14.1 / 4.5	89.2 / 60	deuteranopia 14.07

main / desktop

Career Path (Monochrome Light)

http://127.0.0.1:4321/careers/ai-specialist.html

0 critical
2 warnings

Viewport 1440x1000 Scroll 1440x6175 9 interactive elements sampled

Overall

95%

Color-Blind Friendly

100%

User Friendly

96%

Layout

100%

Tap/Click Targets

88%

WCAG Contrast

100%

Career Path (Monochrome Light) desktop screenshot

Findings

Severity	Type	Message	Selector
warning	target-size	Interactive target is 42px on its smallest side; recommended target is 44px	`astro-island > div.relative.w-full > div.relative > input.input-field.pl-11`
warning	target-size	Interactive target is 34px on its smallest side; recommended target is 44px	`div.w-full.flex-1 > header.relative.py-32 > div.max-w-7xl.mx-auto:nth-of-type(3) > a.inline-flex.items-center`

Lowest Contrast Samples

Selector	Text	Background	WCAG	APCA	Worst CVD
`a.inline-flex.items-center`	#525252	#ffffff	7.81 / 4.5	87.2 / 60	protanopia 7.76
`p.max-w-2xl.text-xl`	#525252	#ffffff	7.81 / 4.5	87.2 / 60	protanopia 7.76
`span.px-4.py-1\.5`	#171717	#f6f6f6	16.59 / 4.5	99.3 / 60	deuteranopia 16.51
`a.flex.min-h-11`	#0a0a0a	#ffffff	19.8 / 4.5	105.8 / 60	tritanopia 19.79
`span.text-lg.md\:text-xl`	#0a0a0a	#ffffff	19.8 / 3	105.8 / 45	tritanopia 19.79
`a.min-h-11.px-4`	#0a0a0a	#ffffff	19.8 / 4.5	105.8 / 60	tritanopia 19.79
`#general-progress-text`	#0a0a0a	#ffffff	19.8 / 4.5	105.8 / 60	tritanopia 19.79
`h1.text-5xl.md\:text-7xl`	#0a0a0a	#ffffff	19.8 / 3	105.8 / 45	tritanopia 19.79
`h3.text-2xl.font-black`	#0a0a0a	#ffffff	19.8 / 3	105.8 / 45	tritanopia 19.79
`p.text-light-text.dark\:text-dark-text`	#0a0a0a	#ffffff	19.8 / 4.5	105.8 / 60	tritanopia 19.79

main / desktop

Career Path (Monochrome Dark)

http://127.0.0.1:4321/careers/ai-specialist.html

0 critical
4 warnings

Viewport 1440x1000 Scroll 1440x6175 9 interactive elements sampled

Overall

92%

Color-Blind Friendly

100%

User Friendly

96%

Layout

100%

Tap/Click Targets

88%

WCAG Contrast

100%

Career Path (Monochrome Dark) desktop screenshot

Findings

Severity	Type	Message	Selector
warning	target-size	Interactive target is 42px on its smallest side; recommended target is 44px	`astro-island > div.relative.w-full > div.relative > input.input-field.pl-11`
warning	target-size	Interactive target is 34px on its smallest side; recommended target is 44px	`div.w-full.flex-1 > header.relative.py-32 > div.max-w-7xl.mx-auto:nth-of-type(3) > a.inline-flex.items-center`
warning	apca-contrast	APCA contrast 51.3 is below the modern readability target 60	`a.inline-flex.items-center`
warning	apca-contrast	APCA contrast 51.3 is below the modern readability target 60	`p.max-w-2xl.text-xl`

Lowest Contrast Samples

Selector	Text	Background	WCAG	APCA	Worst CVD
`a.inline-flex.items-center`	#a3a3a3	#181818	7.04 / 4.5	51.3 / 60	tritanopia 7.02
`p.max-w-2xl.text-xl`	#a3a3a3	#181818	7.04 / 4.5	51.3 / 60	tritanopia 7.02
`span.px-4.py-1\.5`	#e5e5e5	#272727	11.86 / 4.5	87.8 / 60	protanopia 11.83
`a.flex.min-h-11`	#f5f5f5	#272727	13.7 / 4.5	98 / 60	deuteranopia 13.67
`span.text-lg.md\:text-xl`	#f5f5f5	#272727	13.7 / 3	98 / 45	deuteranopia 13.67
`a.min-h-11.px-4`	#f5f5f5	#272727	13.7 / 4.5	98 / 60	deuteranopia 13.67
`#general-progress-text`	#f5f5f5	#181818	16.29 / 4.5	100.2 / 60	tritanopia 16.23
`h1.text-5xl.md\:text-7xl`	#f5f5f5	#181818	16.29 / 3	100.2 / 45	tritanopia 16.23
`h3.text-2xl.font-black`	#f5f5f5	#181818	16.29 / 3	100.2 / 45	tritanopia 16.23
`p.text-light-text.dark\:text-dark-text`	#f5f5f5	#181818	16.29 / 4.5	100.2 / 60	tritanopia 16.23

main / mobile

Home (Modern Light)

http://127.0.0.1:4321/

0 critical
1 warnings

Viewport 390x844 Scroll 390x5269 6 interactive elements sampled

Overall

97%

Color-Blind Friendly

100%

User Friendly

98%

Layout

94%

Tap/Click Targets

100%

WCAG Contrast

100%

Findings

Severity	Type	Message	Selector
warning	interactive-gap	Interactive elements are 4px apart; minimum gap is 8px	`div.flex.items-center:nth-of-type(2) > astro-island > div.relative > button.inline-flex.min-h-11 <-> #mobile-menu-toggle`

Lowest Contrast Samples

Selector	Text	Background	WCAG	APCA	Worst CVD
`p.mt-8.max-w-2xl`	#64748b	#ffffff	4.76 / 4.5	73 / 60	protanopia 4.75
`a.group.inline-flex`	#ffffff	#2563eb	5.17 / 4.5	80.2 / 60	protanopia 5.18
`a.flex.min-h-11`	#0f172a	#ffffff	17.85 / 4.5	104.6 / 60	protanopia 17.83
`span.text-lg.md\:text-xl`	#0f172a	#ffffff	17.85 / 4.5	104.6 / 60	protanopia 17.83
`h1.max-w-4xl.text-5xl`	#0f172a	#ffffff	17.85 / 3	104.6 / 45	protanopia 17.83
`a.group.inline-flex`	#0f172a	#ffffff	17.85 / 4.5	104.6 / 60	protanopia 17.83

main / mobile

Python Lesson (Monochrome Light)

http://127.0.0.1:4321/lessons/python/intro.html

0 critical
2 warnings

Viewport 390x844 Scroll 390x5089 6 interactive elements sampled

Overall

94%

Color-Blind Friendly

100%

User Friendly

97%

Layout

90%

Tap/Click Targets

100%

WCAG Contrast

100%

Python Lesson (Monochrome Light) mobile screenshot

Findings

Severity	Type	Message	Selector
warning	interactive-gap	Interactive elements are 4px apart; minimum gap is 8px	`div.flex.items-center:nth-of-type(2) > astro-island > div.relative > button.inline-flex.min-h-11 <-> #mobile-menu-toggle`
warning	heading-landmark	Viewport has 2 visible h1 elements; expected 1	aside.fixed.inset-y-0 > div.py-8.flex > div.md\:hidden.flex:nth-of-type(1) > h2.text-2xl.font-black, div.flex.min-h-screen:nth-of-type(3) > aside.fixed.inset-y-0 > div.py-8.flex > h3.px-4.py-3:nth-of-type(1), div.flex.min-h-screen:nth-of-type(3) > aside.fixed.inset-y-0 > div.py-8.flex > h3.px-4.py-3:nth-of-type(2), div.flex.min-h-screen:nth-of-type(3) > aside.fixed.inset-y-0 > div.py-8.flex > h3.px-4.py-3:nth-of-type(3), div.flex.min-h-screen:nth-of-type(3) > aside.fixed.inset-y-0 > div.py-8.flex > h3.px-4.py-3:nth-of-type(4), div.flex.min-h-screen:nth-of-type(3) > aside.fixed.inset-y-0 > div.py-8.flex > h3.px-4.py-3:nth-of-type(5), div.flex.min-h-screen:nth-of-type(3) > aside.fixed.inset-y-0 > div.py-8.flex > h3.px-4.py-3:nth-of-type(6), div.flex.min-h-screen:nth-of-type(3) > aside.fixed.inset-y-0 > div.py-8.flex > h3.px-4.py-3:nth-of-type(7)

Lowest Contrast Samples

Selector	Text	Background	WCAG	APCA	Worst CVD
`span.text-light-muted.dark\:text-dark-muted`	#525252	#ffffff	7.81 / 4.5	87.2 / 60	protanopia 7.76
`span.truncate.text-\[11px\]`	#525252	#ffffff	7.81 / 4.5	87.2 / 60	protanopia 7.76
`a.inline-flex.min-h-11`	#171717	#ffffff	17.93 / 4.5	104.7 / 60	protanopia 17.89
`#sidebar-toggle`	#ffffff	#171717	17.93 / 4.5	106.9 / 60	protanopia 17.89
`a.min-h-11.bg-primary`	#ffffff	#171717	17.93 / 4.5	106.9 / 60	protanopia 17.89
`a.flex.min-h-11`	#0a0a0a	#ffffff	19.8 / 4.5	105.8 / 60	tritanopia 19.79
`span.text-lg.md\:text-xl`	#0a0a0a	#ffffff	19.8 / 4.5	105.8 / 60	tritanopia 19.79
`h1.text-4xl.md\:text-6xl`	#0a0a0a	#ffffff	19.8 / 3	105.8 / 45	tritanopia 19.79
`#the-philosophy-of-python`	#0a0a0a	#ffffff	19.8 / 3	105.8 / 45	tritanopia 19.79
`p`	#0a0a0a	#ffffff	19.8 / 4.5	105.8 / 60	tritanopia 19.79

main / mobile

Python Lesson (Monochrome Dark)

http://127.0.0.1:4321/lessons/python/intro.html

0 critical
4 warnings

Viewport 390x844 Scroll 390x5089 6 interactive elements sampled

Overall

91%

Color-Blind Friendly

100%

User Friendly

96%

Layout

90%

Tap/Click Targets

100%

WCAG Contrast

100%

Python Lesson (Monochrome Dark) mobile screenshot

Findings

Severity	Type	Message	Selector
warning	interactive-gap	Interactive elements are 4px apart; minimum gap is 8px	`div.flex.items-center:nth-of-type(2) > astro-island > div.relative > button.inline-flex.min-h-11 <-> #mobile-menu-toggle`
warning	heading-landmark	Viewport has 2 visible h1 elements; expected 1	aside.fixed.inset-y-0 > div.py-8.flex > div.md\:hidden.flex:nth-of-type(1) > h2.text-2xl.font-black, div.flex.min-h-screen:nth-of-type(3) > aside.fixed.inset-y-0 > div.py-8.flex > h3.px-4.py-3:nth-of-type(1), div.flex.min-h-screen:nth-of-type(3) > aside.fixed.inset-y-0 > div.py-8.flex > h3.px-4.py-3:nth-of-type(2), div.flex.min-h-screen:nth-of-type(3) > aside.fixed.inset-y-0 > div.py-8.flex > h3.px-4.py-3:nth-of-type(3), div.flex.min-h-screen:nth-of-type(3) > aside.fixed.inset-y-0 > div.py-8.flex > h3.px-4.py-3:nth-of-type(4), div.flex.min-h-screen:nth-of-type(3) > aside.fixed.inset-y-0 > div.py-8.flex > h3.px-4.py-3:nth-of-type(5), div.flex.min-h-screen:nth-of-type(3) > aside.fixed.inset-y-0 > div.py-8.flex > h3.px-4.py-3:nth-of-type(6), div.flex.min-h-screen:nth-of-type(3) > aside.fixed.inset-y-0 > div.py-8.flex > h3.px-4.py-3:nth-of-type(7)
warning	apca-contrast	APCA contrast 51.3 is below the modern readability target 60	`span.text-light-muted.dark\:text-dark-muted`
warning	apca-contrast	APCA contrast 51.3 is below the modern readability target 60	`span.truncate.text-\[11px\]`

Lowest Contrast Samples

Selector	Text	Background	WCAG	APCA	Worst CVD
`span.text-light-muted.dark\:text-dark-muted`	#a3a3a3	#181818	7.04 / 4.5	51.3 / 60	tritanopia 7.02
`span.truncate.text-\[11px\]`	#a3a3a3	#181818	7.04 / 4.5	51.3 / 60	tritanopia 7.02
`a.flex.min-h-11`	#f5f5f5	#272727	13.7 / 4.5	98 / 60	deuteranopia 13.67
`span.text-lg.md\:text-xl`	#f5f5f5	#272727	13.7 / 4.5	98 / 60	deuteranopia 13.67
`a.inline-flex.min-h-11`	#e5e5e5	#181818	14.1 / 4.5	89.9 / 60	deuteranopia 14.07
`#sidebar-toggle`	#181818	#e5e5e5	14.1 / 4.5	89.2 / 60	deuteranopia 14.07
`a.min-h-11.bg-primary`	#181818	#e5e5e5	14.1 / 4.5	89.2 / 60	deuteranopia 14.07
`h1.text-4xl.md\:text-6xl`	#f5f5f5	#181818	16.29 / 3	100.2 / 45	tritanopia 16.23
`#the-philosophy-of-python`	#f5f5f5	#181818	16.29 / 3	100.2 / 45	tritanopia 16.23
`p`	#f5f5f5	#181818	16.29 / 4.5	100.2 / 60	tritanopia 16.23

main / mobile

Career Path (Monochrome Light)

http://127.0.0.1:4321/careers/ai-specialist.html

0 critical
2 warnings

Viewport 390x844 Scroll 390x11345 4 interactive elements sampled

Overall

93%

Color-Blind Friendly

100%

User Friendly

94%

Layout

94%

Tap/Click Targets

86%

WCAG Contrast

100%

Career Path (Monochrome Light) mobile screenshot

Findings

Severity	Type	Message	Selector
warning	target-size	Interactive target is 34px on its smallest side; recommended target is 44px	`div.w-full.flex-1 > header.relative.py-32 > div.max-w-7xl.mx-auto:nth-of-type(3) > a.inline-flex.items-center`
warning	interactive-gap	Interactive elements are 4px apart; minimum gap is 8px	`div.flex.items-center:nth-of-type(2) > astro-island > div.relative > button.inline-flex.min-h-11 <-> #mobile-menu-toggle`

Lowest Contrast Samples

Selector	Text	Background	WCAG	APCA	Worst CVD
`a.inline-flex.items-center`	#525252	#ffffff	7.81 / 4.5	87.2 / 60	protanopia 7.76
`p.max-w-2xl.text-xl`	#525252	#ffffff	7.81 / 4.5	87.2 / 60	protanopia 7.76
`span.px-4.py-1\.5`	#171717	#f6f6f6	16.59 / 4.5	99.3 / 60	deuteranopia 16.51
`a.flex.min-h-11`	#0a0a0a	#ffffff	19.8 / 4.5	105.8 / 60	tritanopia 19.79
`span.text-lg.md\:text-xl`	#0a0a0a	#ffffff	19.8 / 4.5	105.8 / 60	tritanopia 19.79
`#general-progress-text`	#0a0a0a	#ffffff	19.8 / 4.5	105.8 / 60	tritanopia 19.79
`h1.text-5xl.md\:text-7xl`	#0a0a0a	#ffffff	19.8 / 3	105.8 / 45	tritanopia 19.79

main / mobile

Career Path (Monochrome Dark)

http://127.0.0.1:4321/careers/ai-specialist.html

0 critical
4 warnings

Viewport 390x844 Scroll 390x11345 4 interactive elements sampled

Overall

90%

Color-Blind Friendly

100%

User Friendly

93%

Layout

94%

Tap/Click Targets

86%

WCAG Contrast

100%

Career Path (Monochrome Dark) mobile screenshot

Findings

Severity	Type	Message	Selector
warning	target-size	Interactive target is 34px on its smallest side; recommended target is 44px	`div.w-full.flex-1 > header.relative.py-32 > div.max-w-7xl.mx-auto:nth-of-type(3) > a.inline-flex.items-center`
warning	interactive-gap	Interactive elements are 4px apart; minimum gap is 8px	`div.flex.items-center:nth-of-type(2) > astro-island > div.relative > button.inline-flex.min-h-11 <-> #mobile-menu-toggle`
warning	apca-contrast	APCA contrast 51.3 is below the modern readability target 60	`a.inline-flex.items-center`
warning	apca-contrast	APCA contrast 51.3 is below the modern readability target 60	`p.max-w-2xl.text-xl`

Lowest Contrast Samples

Selector	Text	Background	WCAG	APCA	Worst CVD
`a.inline-flex.items-center`	#a3a3a3	#181818	7.04 / 4.5	51.3 / 60	tritanopia 7.02
`p.max-w-2xl.text-xl`	#a3a3a3	#181818	7.04 / 4.5	51.3 / 60	tritanopia 7.02
`span.px-4.py-1\.5`	#e5e5e5	#272727	11.86 / 4.5	87.8 / 60	protanopia 11.83
`a.flex.min-h-11`	#f5f5f5	#272727	13.7 / 4.5	98 / 60	deuteranopia 13.67
`span.text-lg.md\:text-xl`	#f5f5f5	#272727	13.7 / 4.5	98 / 60	deuteranopia 13.67
`#general-progress-text`	#f5f5f5	#181818	16.29 / 4.5	100.2 / 60	tritanopia 16.23
`h1.text-5xl.md\:text-7xl`	#f5f5f5	#181818	16.29 / 3	100.2 / 45	tritanopia 16.23