Skip to content

collection empty-state blueprint links fail WCAG AA in dark mode (text-blue-600, no dark: variant) #14877

Description

@joshdaugherty

Bug description

On /cp/collections/{handle} for a collection that has no entries yet and more than one blueprint, the empty-state panel renders a "Create Entry" step with one link per blueprint (e.g., "Audio Post", "News Release", "Standard Post", "Video Post"). In dark mode, these links are very hard to read.

The links are text-blue-600 with no dark-mode override. On the empty-state card background (gray-850) that is 3.17:1 — below the 4.5:1 WCAG AA threshold for normal text:

  • Link color text-blue-600oklch(0.546 0.245 262.881)
  • Card background dark:bg-gray-850oklch(0.236 0.006 286.015)
  • Contrast: 3.17:1 — AA normal text FAILS (passes only the 3.0:1 large-text bar; these are small text-sm links, so the 4.5:1 bar applies)

Offending markup — resources/js/pages/collections/Empty.vue (lines 48–53 in 6.20.3):

<a
    v-for="blueprint in blueprints"
    :href="blueprint.createEntryUrl"
    class="text-blue-600 text-sm rtl:ml-2 ltr:mr-2"
    v-text="blueprint.title"
/>

Proposed fix

Add the dark-mode variant Statamic already uses for blue links elsewhere in the CP (dark:text-blue-400). text-blue-400oklch(0.707 0.165 254.624) on gray-850 measures 6.31:1 — AA passes (AAA large too):

 <a
     v-for="blueprint in blueprints"
     :href="blueprint.createEntryUrl"
-    class="text-blue-600 text-sm rtl:ml-2 ltr:mr-2"
+    class="text-blue-600 dark:text-blue-400 text-sm rtl:ml-2 ltr:mr-2"
     v-text="blueprint.title"
 />

Precedent — this is the established CP convention

The bare text-blue-600 here is an oversight: every other blue link/affordance in the CP already pairs it with dark:text-blue-400. Examples in the same tree:

File Pattern
command-palette/CommandPalette.vue#L80 text-blue-600 dark:text-blue-400 underline …
entries/calendar/Week.vue#L46 'text-blue-600 dark:text-blue-400': isSelectedDate(date)
updater/Release.vue#L100 … underline text-blue-500 dark:text-blue-400
css/components/fieldtypes/bard.css#L352 @apply break-words text-blue-600 underline dark:text-blue-400
css/components/tabs.css#L43 @apply border-blue-500 text-blue-500 dark:border-blue-400 dark:text-blue-400
ui/Listing/BulkActionsFloatingToolbar.vue#L127 … text-blue-600! … dark:text-blue-400! …

How to reproduce

  1. Set the Control Panel to dark mode.
  2. Create a collection with two or more blueprints and no entries yet.
  3. Visit /cp/collections/{handle}.
  4. In the "Create Entry" step of the empty-state panel, observe the per-blueprint links — they are low-contrast blue on the dark card and hard to read.

Logs

Environment

Environment
Laravel Version: 13.15.0
PHP Version: 8.4.20
Composer Version: 2.9.5
Environment: local
Debug Mode: ENABLED
Maintenance Mode: OFF
Timezone: UTC
Locale: en

Cache
Config: NOT CACHED
Events: NOT CACHED
Routes: NOT CACHED
Views: CACHED

Drivers
Broadcasting: log
Cache: file
Database: sqlite
Logs: stack / single
Mail: smtp
Queue: sync
Session: file

Storage
C:\Users\Josh\Herd\uams-statamic\public\storage: NOT LINKED

Statamic
Addons: 9
License Key: Not set
Sites: 255 ([redacted])
Stache Watcher: Enabled (auto)
Static Caching: Disabled
Version: 6.20.3 PRO

Statamic Addons
el-schneider/statamic-admin-bar: 0.3.2
jacksleight/statamic-bard-mutator: 3.0.5
jacksleight/statamic-bard-texstyle: 4.1.0
statamic/eloquent-driver: 5.9.0
statamic/ssg: 4.1.0
stillat/relationships: 2.4.0
studio1902/statamic-peak-seo: 11.4.0
studio1902/statamic-peak-tools: 9.1.0
uams-web/wordpress-importer: dev-main

Statamic Eloquent Driver
Addon Settings: file
Asset Containers: file
Assets: eloquent
Blueprints: file
Collection Trees: file
Collections: file
Entries: file
Fieldsets: file
Form Submissions: file
Forms: file
Global Sets: file
Global Variables: file
Navigation Trees: file
Navigations: file
Revisions: file
Sites: file
Taxonomies: file
Terms: file
Tokens: file

Installation

Existing Laravel app

Additional details

No response

Metadata

Metadata

Assignees

Labels

Type

No type

Fields

No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions