Improve accessibility of the themes, verify accessibility automatically with axe core

[wildFlo]

Hi
I would like to see how we can improve the demo accessibility by:

• making the themes accessible (I see with axe core some issues in tabs for ex)
• automate testing to avoid issue while changes append in the themes
  Best regards

[saadeghi]

All color pairs of all themes are being tested for contrast to have a minimum of 1:3 contrast
Example results: https://github.com/saadeghi/daisyui/actions/runs/13978793171/job/39139089667#step:6:26

See

  ┌─────┬──────────────┬──────────────────────────────┬───────┬──────┐
  │     │ theme        │ colorPair                    │ ratio │ rate │
  ├─────┼──────────────┼──────────────────────────────┼───────┼──────┤
  │   0 │ aqua         │ base-100, base-content       │ 8.11  │ AAA  │
  │   1 │ aqua         │ base-200, base-content       │ 11.13 │ AAA  │
  │   2 │ aqua         │ base-300, base-content       │ 13.18 │ AAA  │
  │   3 │ aqua         │ primary, primary-content     │ 6.04  │ AA   │
  │   4 │ aqua         │ secondary, secondary-content │ 3.57  │      │
  │   5 │ aqua         │ accent, accent-content       │ 15.36 │ AAA  │
  │   6 │ aqua         │ neutral, neutral-content     │ 8.27  │ AAA  │
  │   7 │ aqua         │ info, info-content           │ 3.94  │      │
  │   8 │ aqua         │ success, success-content     │ 6.11  │ AA   │
  │   9 │ aqua         │ warning, warning-content     │ 4.84  │ AA   │
  │  10 │ aqua         │ error, error-content         │ 7.92  │ AAA  │
  │  11 │ light        │ base-100, base-content       │ 17.73 │ AAA  │
  │  12 │ light        │ base-200, base-content       │ 16.74 │ AAA  │
  │  13 │ light        │ base-300, base-content       │ 15.32 │ AAA  │
  │  14 │ light        │ primary, primary-content     │ 6.76  │ AA   │
  │  15 │ light        │ secondary, secondary-content │ 3.05  │      │
  │  16 │ light        │ accent, accent-content       │ 5     │ AA   │
  │  17 │ light        │ neutral, neutral-content     │ 15.71 │ AAA  │
  │  18 │ light        │ info, info-content           │ 6.26  │ AA   │
  │  19 │ light        │ success, success-content     │ 5.04  │ AA   │
  │  20 │ light        │ warning, warning-content     │ 5.22  │ AA   │
  │  21 │ light        │ error, error-content         │ 5.57  │ AA   │
  │  22 │ emerald      │ base-100, base-content       │ 11.09 │ AAA  │
  │  23 │ emerald      │ base-200, base-content       │ 9.02  │ AAA  │
  │  24 │ emerald      │ base-300, base-content       │ 7.24  │ AAA  │
  │  25 │ emerald      │ primary, primary-content     │ 5.94  │ AA   │
  │  26 │ emerald      │ secondary, secondary-content │ 3.86  │      │
  │  27 │ emerald      │ accent, accent-content       │ 8.2   │ AAA  │
  │  28 │ emerald      │ neutral, neutral-content     │ 10.61 │ AAA  │
  │  29 │ emerald      │ info, info-content           │ 8.77  │ AAA  │
  │  30 │ emerald      │ success, success-content     │ 6.91  │ AA   │
  │  31 │ emerald      │ warning, warning-content     │ 12.94 │ AAA  │
  │  32 │ emerald      │ error, error-content         │ 7.59  │ AAA  │
  │  33 │ synthwave    │ base-100, base-content       │ 9.8   │ AAA  │
  │  34 │ synthwave    │ base-200, base-content       │ 9.06  │ AAA  │
  │  35 │ synthwave    │ base-300, base-content       │ 8.03  │ AAA  │
  │  36 │ synthwave    │ primary, primary-content     │ 5.37  │ AA   │
  │  37 │ synthwave    │ secondary, secondary-content │ 8.23  │ AAA  │
  │  38 │ synthwave    │ accent, accent-content       │ 6.79  │ AA   │
  │  39 │ synthwave    │ neutral, neutral-content     │ 5.58  │ AA   │
  │  40 │ synthwave    │ info, info-content           │ 6.26  │ AA   │
  │  41 │ synthwave    │ success, success-content     │ 7.63  │ AAA  │
  │  42 │ synthwave    │ warning, warning-content     │ 6.51  │ AA   │
  │  43 │ synthwave    │ error, error-content         │ 7     │ AAA  │
  │  44 │ dark         │ base-100, base-content       │ 14.88 │ AAA  │
  │  45 │ dark         │ base-200, base-content       │ 15.76 │ AAA  │
  │  46 │ dark         │ base-300, base-content       │ 16.59 │ AAA  │
  │  47 │ dark         │ primary, primary-content     │ 4.14  │      │
  │  48 │ dark         │ secondary, secondary-content │ 3.05  │      │
  │  49 │ dark         │ accent, accent-content       │ 5     │ AA   │
  │  50 │ dark         │ neutral, neutral-content     │ 15.71 │ AAA  │
  │  51 │ dark         │ info, info-content           │ 6.26  │ AA   │
  │  52 │ dark         │ success, success-content     │ 5.04  │ AA   │
  │  53 │ dark         │ warning, warning-content     │ 5.22  │ AA   │
  │  54 │ dark         │ error, error-content         │ 5.57  │ AA   │
  │  55 │ dim          │ base-100, base-content       │ 7.88  │ AAA  │
  │  56 │ dim          │ base-200, base-content       │ 8.68  │ AAA  │
  │  57 │ dim          │ base-300, base-content       │ 9.15  │ AAA  │
  │  58 │ dim          │ primary, primary-content     │ 13.01 │ AAA  │
  │  59 │ dim          │ secondary, secondary-content │ 7.88  │ AAA  │
  │  60 │ dim          │ accent, accent-content       │ 8.21  │ AAA  │
  │  61 │ dim          │ neutral, neutral-content     │ 9.6   │ AAA  │
  │  62 │ dim          │ info, info-content           │ 13.02 │ AAA  │
  │  63 │ dim          │ success, success-content     │ 13.17 │ AAA  │
  │  64 │ dim          │ warning, warning-content     │ 12.54 │ AAA  │
  │  65 │ dim          │ error, error-content         │ 10.85 │ AAA  │
  │  66 │ lemonade     │ base-100, base-content       │ 17.61 │ AAA  │
  │  67 │ lemonade     │ base-200, base-content       │ 14.33 │ AAA  │
  │  68 │ lemonade     │ base-300, base-content       │ 11.51 │ AAA  │
  │  69 │ lemonade     │ primary, primary-content     │ 5.25  │ AA   │
  │  70 │ lemonade     │ secondary, secondary-content │ 9.89  │ AAA  │
  │  71 │ lemonade     │ accent, accent-content       │ 12.32 │ AAA  │
  │  72 │ lemonade     │ neutral, neutral-content     │ 8.61  │ AAA  │
  │  73 │ lemonade     │ info, info-content           │ 12.66 │ AAA  │
  │  74 │ lemonade     │ success, success-content     │ 12.73 │ AAA  │
  │  75 │ lemonade     │ warning, warning-content     │ 12.58 │ AAA  │
  │  76 │ lemonade     │ error, error-content         │ 12.33 │ AAA  │
  │  77 │ retro        │ base-100, base-content       │ 7.22  │ AAA  │
  │  78 │ retro        │ base-200, base-content       │ 6.51  │ AA   │
  │  79 │ retro        │ base-300, base-content       │ 5.69  │ AA   │
  │  80 │ retro        │ primary, primary-content     │ 5.27  │ AA   │
  │  81 │ retro        │ secondary, secondary-content │ 5.98  │ AA   │
  │  82 │ retro        │ accent, accent-content       │ 3.12  │      │
  │  83 │ retro        │ neutral, neutral-content     │ 5.08  │ AA   │
  │  84 │ retro        │ info, info-content           │ 3.78  │      │
  │  85 │ retro        │ success, success-content     │ 4.88  │ AA   │
  │  86 │ retro        │ warning, warning-content     │ 3.3   │      │
  │  87 │ retro        │ error, error-content         │ 3.34  │      │
  │  88 │ fantasy      │ base-100, base-content       │ 14.68 │ AAA  │
  │  89 │ fantasy      │ base-200, base-content       │ 11.94 │ AAA  │
  │  90 │ fantasy      │ base-300, base-content       │ 9.59  │ AAA  │
  │  91 │ fantasy      │ primary, primary-content     │ 7.7   │ AAA  │
  │  92 │ fantasy      │ secondary, secondary-content │ 3.83  │      │
  │  93 │ fantasy      │ accent, accent-content       │ 8.64  │ AAA  │
  │  94 │ fantasy      │ neutral, neutral-content     │ 9.46  │ AAA  │
  │  95 │ fantasy      │ info, info-content           │ 8.77  │ AAA  │
  │  96 │ fantasy      │ success, success-content     │ 6.91  │ AA   │
  │  97 │ fantasy      │ warning, warning-content     │ 12.94 │ AAA  │
  │  98 │ fantasy      │ error, error-content         │ 7.59  │ AAA  │
  │  99 │ dracula      │ base-100, base-content       │ 13.36 │ AAA  │
  │ 100 │ dracula      │ base-200, base-content       │ 14.25 │ AAA  │
  │ 101 │ dracula      │ base-300, base-content       │ 15.13 │ AAA  │
  │ 102 │ dracula      │ primary, primary-content     │ 8.28  │ AAA  │
  │ 103 │ dracula      │ secondary, secondary-content │ 8.2   │ AAA  │
  │ 104 │ dracula      │ accent, accent-content       │ 11.3  │ AAA  │
  │ 105 │ dracula      │ neutral, neutral-content     │ 6.57  │ AA   │
  │ 106 │ dracula      │ info, info-content           │ 13.63 │ AAA  │
  │ 107 │ dracula      │ success, success-content     │ 13.73 │ AAA  │
  │ 108 │ dracula      │ warning, warning-content     │ 16.45 │ AAA  │
  │ 109 │ dracula      │ error, error-content         │ 6.39  │ AA   │
  │ 110 │ luxury       │ base-100, base-content       │ 9.03  │ AAA  │
  │ 111 │ luxury       │ base-200, base-content       │ 8.18  │ AAA  │
  │ 112 │ luxury       │ base-300, base-content       │ 7.63  │ AAA  │
  │ 113 │ luxury       │ primary, primary-content     │ 18.1  │ AAA  │
  │ 114 │ luxury       │ secondary, secondary-content │ 9.56  │ AAA  │
  │ 115 │ luxury       │ accent, accent-content       │ 7.37  │ AAA  │
  │ 116 │ luxury       │ neutral, neutral-content     │ 13.54 │ AAA  │
  │ 117 │ luxury       │ info, info-content           │ 10.26 │ AAA  │
  │ 118 │ luxury       │ success, success-content     │ 10.28 │ AAA  │
  │ 119 │ luxury       │ warning, warning-content     │ 12.62 │ AAA  │
  │ 120 │ luxury       │ error, error-content         │ 7.36  │ AAA  │
  │ 121 │ abyss        │ base-100, base-content       │ 13.11 │ AAA  │
  │ 122 │ abyss        │ base-200, base-content       │ 14.33 │ AAA  │
  │ 123 │ abyss        │ base-300, base-content       │ 15.08 │ AAA  │
  │ 124 │ abyss        │ primary, primary-content     │ 4.71  │ AA   │
  │ 125 │ abyss        │ secondary, secondary-content │ 4.83  │ AA   │
  │ 126 │ abyss        │ accent, accent-content       │ 7.65  │ AAA  │
  │ 127 │ abyss        │ neutral, neutral-content     │ 9.76  │ AAA  │
  │ 128 │ abyss        │ info, info-content           │ 6.26  │ AA   │
  │ 129 │ abyss        │ success, success-content     │ 8.5   │ AAA  │
  │ 130 │ abyss        │ warning, warning-content     │ 4.81  │ AA   │
  │ 131 │ abyss        │ error, error-content         │ 4.59  │ AA   │
  │ 132 │ cmyk         │ base-100, base-content       │ 18.1  │ AAA  │
  │ 133 │ cmyk         │ base-200, base-content       │ 15.64 │ AAA  │
  │ 134 │ cmyk         │ base-300, base-content       │ 13.43 │ AAA  │
  │ 135 │ cmyk         │ primary, primary-content     │ 8.06  │ AAA  │
  │ 136 │ cmyk         │ secondary, secondary-content │ 5.52  │ AA   │
  │ 137 │ cmyk         │ accent, accent-content       │ 15.84 │ AAA  │
  │ 138 │ cmyk         │ neutral, neutral-content     │ 10.78 │ AAA  │
  │ 139 │ cmyk         │ info, info-content           │ 7.27  │ AAA  │
  │ 140 │ cmyk         │ success, success-content     │ 5.38  │ AA   │
  │ 141 │ cmyk         │ warning, warning-content     │ 7.42  │ AAA  │
  │ 142 │ cmyk         │ error, error-content         │ 5.05  │ AA   │
  │ 143 │ valentine    │ base-100, base-content       │ 5.7   │ AA   │
  │ 144 │ valentine    │ base-200, base-content       │ 5.18  │ AA   │
  │ 145 │ valentine    │ base-300, base-content       │ 4.38  │      │
  │ 146 │ valentine    │ primary, primary-content     │ 3.67  │      │
  │ 147 │ valentine    │ secondary, secondary-content │ 3.8   │      │
  │ 148 │ valentine    │ accent, accent-content       │ 5.57  │ AA   │
  │ 149 │ valentine    │ neutral, neutral-content     │ 7.03  │ AAA  │
  │ 150 │ valentine    │ info, info-content           │ 5.23  │ AA   │
  │ 151 │ valentine    │ success, success-content     │ 5     │ AA   │
  │ 152 │ valentine    │ warning, warning-content     │ 6.79  │ AA   │
  │ 153 │ valentine    │ error, error-content         │ 3.59  │      │
  │ 154 │ silk         │ base-100, base-content       │ 8.46  │ AAA  │
  │ 155 │ silk         │ base-200, base-content       │ 7.96  │ AAA  │
  │ 156 │ silk         │ base-300, base-content       │ 6.84  │ AA   │
  │ 157 │ silk         │ primary, primary-content     │ 14.74 │ AAA  │
  │ 158 │ silk         │ secondary, secondary-content │ 6.78  │ AA   │
  │ 159 │ silk         │ accent, accent-content       │ 13.04 │ AAA  │
  │ 160 │ silk         │ neutral, neutral-content     │ 9.68  │ AAA  │
  │ 161 │ silk         │ info, info-content           │ 7.37  │ AAA  │
  │ 162 │ silk         │ success, success-content     │ 10.14 │ AAA  │
  │ 163 │ silk         │ warning, warning-content     │ 4.8   │ AA   │
  │ 164 │ silk         │ error, error-content         │ 5.14  │ AA   │
  │ 165 │ autumn       │ base-100, base-content       │ 16.3  │ AAA  │
  │ 166 │ autumn       │ base-200, base-content       │ 13.28 │ AAA  │
  │ 167 │ autumn       │ base-300, base-content       │ 10.69 │ AAA  │
  │ 168 │ autumn       │ primary, primary-content     │ 6.73  │ AA   │
  │ 169 │ autumn       │ secondary, secondary-content │ 5.07  │ AA   │
  │ 170 │ autumn       │ accent, accent-content       │ 8.22  │ AAA  │
  │ 171 │ autumn       │ neutral, neutral-content     │ 3.84  │      │
  │ 172 │ autumn       │ info, info-content           │ 7.51  │ AAA  │
  │ 173 │ autumn       │ success, success-content     │ 5.56  │ AA   │
  │ 174 │ autumn       │ warning, warning-content     │ 7.14  │ AAA  │
  │ 175 │ autumn       │ error, error-content         │ 4.45  │      │
  │ 176 │ corporate    │ base-100, base-content       │ 17.21 │ AAA  │
  │ 177 │ corporate    │ base-200, base-content       │ 14.01 │ AAA  │
  │ 178 │ corporate    │ base-300, base-content       │ 11.25 │ AAA  │
  │ 179 │ corporate    │ primary, primary-content     │ 4.23  │      │
  │ 180 │ corporate    │ secondary, secondary-content │ 4.85  │ AA   │
  │ 181 │ corporate    │ accent, accent-content       │ 3.72  │      │
  │ 182 │ corporate    │ neutral, neutral-content     │ 21    │ AAA  │
  │ 183 │ corporate    │ info, info-content           │ 3.8   │      │
  │ 184 │ corporate    │ success, success-content     │ 3.36  │      │
  │ 185 │ corporate    │ warning, warning-content     │ 13.22 │ AAA  │
  │ 186 │ corporate    │ error, error-content         │ 7.2   │ AAA  │
  │ 187 │ business     │ base-100, base-content       │ 10.26 │ AAA  │
  │ 188 │ business     │ base-200, base-content       │ 10.73 │ AAA  │
  │ 189 │ business     │ base-300, base-content       │ 11.17 │ AAA  │
  │ 190 │ business     │ primary, primary-content     │ 6.04  │ AA   │
  │ 191 │ business     │ secondary, secondary-content │ 6.06  │ AA   │
  │ 192 │ business     │ accent, accent-content       │ 6.33  │ AA   │
  │ 193 │ business     │ neutral, neutral-content     │ 9.54  │ AAA  │
  │ 194 │ business     │ info, info-content           │ 5.78  │ AA   │
  │ 195 │ business     │ success, success-content     │ 7.81  │ AAA  │
  │ 196 │ business     │ warning, warning-content     │ 9.51  │ AAA  │
  │ 197 │ business     │ error, error-content         │ 4.47  │      │
  │ 198 │ acid         │ base-100, base-content       │ 19.82 │ AAA  │
  │ 199 │ acid         │ base-200, base-content       │ 18.15 │ AAA  │
  │ 200 │ acid         │ base-300, base-content       │ 16.07 │ AAA  │
  │ 201 │ acid         │ primary, primary-content     │ 6.69  │ AA   │
  │ 202 │ acid         │ secondary, secondary-content │ 7.77  │ AAA  │
  │ 203 │ acid         │ accent, accent-content       │ 15.69 │ AAA  │
  │ 204 │ acid         │ neutral, neutral-content     │ 11.21 │ AAA  │
  │ 205 │ acid         │ info, info-content           │ 5.2   │ AA   │
  │ 206 │ acid         │ success, success-content     │ 13.5  │ AAA  │
  │ 207 │ acid         │ warning, warning-content     │ 14.45 │ AAA  │
  │ 208 │ acid         │ error, error-content         │ 5.4   │ AA   │
  │ 209 │ cupcake      │ base-100, base-content       │ 15.91 │ AAA  │
  │ 210 │ cupcake      │ base-200, base-content       │ 14.21 │ AAA  │
  │ 211 │ cupcake      │ base-300, base-content       │ 13.21 │ AAA  │
  │ 212 │ cupcake      │ primary, primary-content     │ 5.21  │ AA   │
  │ 213 │ cupcake      │ secondary, secondary-content │ 5.8   │ AA   │
  │ 214 │ cupcake      │ accent, accent-content       │ 5.41  │ AA   │
  │ 215 │ cupcake      │ neutral, neutral-content     │ 11.9  │ AAA  │
  │ 216 │ cupcake      │ info, info-content           │ 4.98  │ AA   │
  │ 217 │ cupcake      │ success, success-content     │ 5.93  │ AA   │
  │ 218 │ cupcake      │ warning, warning-content     │ 7.58  │ AAA  │
  │ 219 │ cupcake      │ error, error-content         │ 4.12  │      │
  │ 220 │ winter       │ base-100, base-content       │ 8.5   │ AAA  │
  │ 221 │ winter       │ base-200, base-content       │ 7.9   │ AAA  │
  │ 222 │ winter       │ base-300, base-content       │ 6.97  │ AA   │
  │ 223 │ winter       │ primary, primary-content     │ 3.66  │      │
  │ 224 │ winter       │ secondary, secondary-content │ 6.2   │ AA   │
  │ 225 │ winter       │ accent, accent-content       │ 4.65  │ AA   │
  │ 226 │ winter       │ neutral, neutral-content     │ 11.18 │ AAA  │
  │ 227 │ winter       │ info, info-content           │ 13.54 │ AAA  │
  │ 228 │ winter       │ success, success-content     │ 10.84 │ AAA  │
  │ 229 │ winter       │ warning, warning-content     │ 13.58 │ AAA  │
  │ 230 │ winter       │ error, error-content         │ 7.93  │ AAA  │
  │ 231 │ sunset       │ base-100, base-content       │ 8.49  │ AAA  │
  │ 232 │ sunset       │ base-200, base-content       │ 8.88  │ AAA  │
  │ 233 │ sunset       │ base-300, base-content       │ 9.23  │ AAA  │
  │ 234 │ sunset       │ primary, primary-content     │ 8.29  │ AAA  │
  │ 235 │ sunset       │ secondary, secondary-content │ 7.52  │ AAA  │
  │ 236 │ sunset       │ accent, accent-content       │ 7.37  │ AAA  │
  │ 237 │ sunset       │ neutral, neutral-content     │ 5.82  │ AA   │
  │ 238 │ sunset       │ info, info-content           │ 12.62 │ AAA  │
  │ 239 │ sunset       │ success, success-content     │ 12.62 │ AAA  │
  │ 240 │ sunset       │ warning, warning-content     │ 12.2  │ AAA  │
  │ 241 │ sunset       │ error, error-content         │ 11.94 │ AAA  │
  │ 242 │ garden       │ base-100, base-content       │ 15.54 │ AAA  │
  │ 243 │ garden       │ base-200, base-content       │ 12.67 │ AAA  │
  │ 244 │ garden       │ base-300, base-content       │ 10.22 │ AAA  │
  │ 245 │ garden       │ primary, primary-content     │ 4.15  │      │
  │ 246 │ garden       │ secondary, secondary-content │ 4.96  │ AA   │
  │ 247 │ garden       │ accent, accent-content       │ 4.48  │      │
  │ 248 │ garden       │ neutral, neutral-content     │ 13.32 │ AAA  │
  │ 249 │ garden       │ info, info-content           │ 8.77  │ AAA  │
  │ 250 │ garden       │ success, success-content     │ 6.91  │ AA   │
  │ 251 │ garden       │ warning, warning-content     │ 12.94 │ AAA  │
  │ 252 │ garden       │ error, error-content         │ 7.59  │ AAA  │
  │ 253 │ cyberpunk    │ base-100, base-content       │ 18.12 │ AAA  │
  │ 254 │ cyberpunk    │ base-200, base-content       │ 16.55 │ AAA  │
  │ 255 │ cyberpunk    │ base-300, base-content       │ 13.69 │ AAA  │
  │ 256 │ cyberpunk    │ primary, primary-content     │ 7.86  │ AAA  │
  │ 257 │ cyberpunk    │ secondary, secondary-content │ 12.18 │ AAA  │
  │ 258 │ cyberpunk    │ accent, accent-content       │ 7.28  │ AAA  │
  │ 259 │ cyberpunk    │ neutral, neutral-content     │ 14.68 │ AAA  │
  │ 260 │ cyberpunk    │ info, info-content           │ 8.77  │ AAA  │
  │ 261 │ cyberpunk    │ success, success-content     │ 6.91  │ AA   │
  │ 262 │ cyberpunk    │ warning, warning-content     │ 12.94 │ AAA  │
  │ 263 │ cyberpunk    │ error, error-content         │ 7.59  │ AAA  │
  │ 264 │ black        │ base-100, base-content       │ 14.45 │ AAA  │
  │ 265 │ black        │ base-200, base-content       │ 12.71 │ AAA  │
  │ 266 │ black        │ base-300, base-content       │ 11.91 │ AAA  │
  │ 267 │ black        │ primary, primary-content     │ 11.31 │ AAA  │
  │ 268 │ black        │ secondary, secondary-content │ 11.31 │ AAA  │
  │ 269 │ black        │ accent, accent-content       │ 11.31 │ AAA  │
  │ 270 │ black        │ neutral, neutral-content     │ 11.31 │ AAA  │
  │ 271 │ black        │ info, info-content           │ 6.17  │ AA   │
  │ 272 │ black        │ success, success-content     │ 3.9   │      │
  │ 273 │ black        │ warning, warning-content     │ 17.03 │ AAA  │
  │ 274 │ black        │ error, error-content         │ 5.08  │ AA   │
  │ 275 │ bumblebee    │ base-100, base-content       │ 18.1  │ AAA  │
  │ 276 │ bumblebee    │ base-200, base-content       │ 16.6  │ AAA  │
  │ 277 │ bumblebee    │ base-300, base-content       │ 14.29 │ AAA  │
  │ 278 │ bumblebee    │ primary, primary-content     │ 5.49  │ AA   │
  │ 279 │ bumblebee    │ secondary, secondary-content │ 4.15  │      │
  │ 280 │ bumblebee    │ accent, accent-content       │ 21    │ AAA  │
  │ 281 │ bumblebee    │ neutral, neutral-content     │ 8.24  │ AAA  │
  │ 282 │ bumblebee    │ info, info-content           │ 4.24  │      │
  │ 283 │ bumblebee    │ success, success-content     │ 5.04  │ AA   │
  │ 284 │ bumblebee    │ warning, warning-content     │ 5.22  │ AA   │
  │ 285 │ bumblebee    │ error, error-content         │ 3.54  │      │
  │ 286 │ forest       │ base-100, base-content       │ 10.82 │ AAA  │
  │ 287 │ forest       │ base-200, base-content       │ 11.33 │ AAA  │
  │ 288 │ forest       │ base-300, base-content       │ 11.77 │ AAA  │
  │ 289 │ forest       │ primary, primary-content     │ 8.04  │ AAA  │
  │ 290 │ forest       │ secondary, secondary-content │ 7.84  │ AAA  │
  │ 291 │ forest       │ accent, accent-content       │ 8.02  │ AAA  │
  │ 292 │ forest       │ neutral, neutral-content     │ 8.6   │ AAA  │
  │ 293 │ forest       │ info, info-content           │ 8.77  │ AAA  │
  │ 294 │ forest       │ success, success-content     │ 6.91  │ AA   │
  │ 295 │ forest       │ warning, warning-content     │ 12.94 │ AAA  │
  │ 296 │ forest       │ error, error-content         │ 7.59  │ AAA  │
  │ 297 │ halloween    │ base-100, base-content       │ 11.2  │ AAA  │
  │ 298 │ halloween    │ base-200, base-content       │ 12.58 │ AAA  │
  │ 299 │ halloween    │ base-300, base-content       │ 13.26 │ AAA  │
  │ 300 │ halloween    │ primary, primary-content     │ 8.47  │ AAA  │
  │ 301 │ halloween    │ secondary, secondary-content │ 5.91  │ AA   │
  │ 302 │ halloween    │ accent, accent-content       │ 6.92  │ AA   │
  │ 303 │ halloween    │ neutral, neutral-content     │ 10.32 │ AAA  │
  │ 304 │ halloween    │ info, info-content           │ 3.94  │      │
  │ 305 │ halloween    │ success, success-content     │ 6.11  │ AA   │
  │ 306 │ halloween    │ warning, warning-content     │ 6.31  │ AA   │
  │ 307 │ halloween    │ error, error-content         │ 5.85  │ AA   │
  │ 308 │ coffee       │ base-100, base-content       │ 6.71  │ AA   │
  │ 309 │ coffee       │ base-200, base-content       │ 7.21  │ AAA  │
  │ 310 │ coffee       │ base-300, base-content       │ 7.88  │ AAA  │
  │ 311 │ coffee       │ primary, primary-content     │ 7.78  │ AAA  │
  │ 312 │ coffee       │ secondary, secondary-content │ 7.68  │ AAA  │
  │ 313 │ coffee       │ accent, accent-content       │ 5.73  │ AA   │
  │ 314 │ coffee       │ neutral, neutral-content     │ 11.54 │ AAA  │
  │ 315 │ coffee       │ info, info-content           │ 10.48 │ AAA  │
  │ 316 │ coffee       │ success, success-content     │ 8.94  │ AAA  │
  │ 317 │ coffee       │ warning, warning-content     │ 13.2  │ AAA  │
  │ 318 │ coffee       │ error, error-content         │ 9.12  │ AAA  │
  │ 319 │ night        │ base-100, base-content       │ 10.98 │ AAA  │
  │ 320 │ night        │ base-200, base-content       │ 11.31 │ AAA  │
  │ 321 │ night        │ base-300, base-content       │ 11.62 │ AAA  │
  │ 322 │ night        │ primary, primary-content     │ 9.16  │ AAA  │
  │ 323 │ night        │ secondary, secondary-content │ 6.72  │ AA   │
  │ 324 │ night        │ accent, accent-content       │ 7.47  │ AAA  │
  │ 325 │ night        │ neutral, neutral-content     │ 9.43  │ AAA  │
  │ 326 │ night        │ info, info-content           │ 7.57  │ AAA  │
  │ 327 │ night        │ success, success-content     │ 10.42 │ AAA  │
  │ 328 │ night        │ warning, warning-content     │ 11.38 │ AAA  │
  │ 329 │ night        │ error, error-content         │ 7.36  │ AAA  │
  │ 330 │ wireframe    │ base-100, base-content       │ 18.1  │ AAA  │
  │ 331 │ wireframe    │ base-200, base-content       │ 16.6  │ AAA  │
  │ 332 │ wireframe    │ base-300, base-content       │ 15.18 │ AAA  │
  │ 333 │ wireframe    │ primary, primary-content     │ 10.48 │ AAA  │
  │ 334 │ wireframe    │ secondary, secondary-content │ 10.48 │ AAA  │
  │ 335 │ wireframe    │ accent, accent-content       │ 10.48 │ AAA  │
  │ 336 │ wireframe    │ neutral, neutral-content     │ 10.48 │ AAA  │
  │ 337 │ wireframe    │ info, info-content           │ 5.76  │ AA   │
  │ 338 │ wireframe    │ success, success-content     │ 5.93  │ AA   │
  │ 339 │ wireframe    │ warning, warning-content     │ 5.73  │ AA   │
  │ 340 │ wireframe    │ error, error-content         │ 5.8   │ AA   │
  │ 341 │ caramellatte │ base-100, base-content       │ 9.18  │ AAA  │
  │ 342 │ caramellatte │ base-200, base-content       │ 8.39  │ AAA  │
  │ 343 │ caramellatte │ base-300, base-content       │ 7.16  │ AAA  │
  │ 344 │ caramellatte │ primary, primary-content     │ 21    │ AAA  │
  │ 345 │ caramellatte │ secondary, secondary-content │ 12.84 │ AAA  │
  │ 346 │ caramellatte │ accent, accent-content       │ 5.41  │ AA   │
  │ 347 │ caramellatte │ neutral, neutral-content     │ 5.01  │ AA   │
  │ 348 │ caramellatte │ info, info-content           │ 6.61  │ AA   │
  │ 349 │ caramellatte │ success, success-content     │ 5.67  │ AA   │
  │ 350 │ caramellatte │ warning, warning-content     │ 5.22  │ AA   │
  │ 351 │ caramellatte │ error, error-content         │ 3.54  │      │
  │ 352 │ lofi         │ base-100, base-content       │ 21    │ AAA  │
  │ 353 │ lofi         │ base-200, base-content       │ 19.25 │ AAA  │
  │ 354 │ lofi         │ base-300, base-content       │ 17.61 │ AAA  │
  │ 355 │ lofi         │ primary, primary-content     │ 19.44 │ AAA  │
  │ 356 │ lofi         │ secondary, secondary-content │ 17.54 │ AAA  │
  │ 357 │ lofi         │ accent, accent-content       │ 15.13 │ AAA  │
  │ 358 │ lofi         │ neutral, neutral-content     │ 21    │ AAA  │
  │ 359 │ lofi         │ info, info-content           │ 10.59 │ AAA  │
  │ 360 │ lofi         │ success, success-content     │ 14.74 │ AAA  │
  │ 361 │ lofi         │ warning, warning-content     │ 13.2  │ AAA  │
  │ 362 │ lofi         │ error, error-content         │ 9.43  │ AAA  │
  │ 363 │ nord         │ base-100, base-content       │ 10.84 │ AAA  │
  │ 364 │ nord         │ base-200, base-content       │ 10.26 │ AAA  │
  │ 365 │ nord         │ base-300, base-content       │ 9.24  │ AAA  │
  │ 366 │ nord         │ primary, primary-content     │ 5.04  │ AA   │
  │ 367 │ nord         │ secondary, secondary-content │ 7.4   │ AAA  │
  │ 368 │ nord         │ accent, accent-content       │ 9.76  │ AAA  │
  │ 369 │ nord         │ neutral, neutral-content     │ 5.46  │ AA   │
  │ 370 │ nord         │ info, info-content           │ 7.05  │ AAA  │
  │ 371 │ nord         │ success, success-content     │ 9.59  │ AAA  │
  │ 372 │ nord         │ warning, warning-content     │ 12.23 │ AAA  │
  │ 373 │ nord         │ error, error-content         │ 4.97  │ AA   │
  │ 374 │ pastel       │ base-100, base-content       │ 18.1  │ AAA  │
  │ 375 │ pastel       │ base-200, base-content       │ 17.32 │ AAA  │
  │ 376 │ pastel       │ base-300, base-content       │ 14.49 │ AAA  │
  │ 377 │ pastel       │ primary, primary-content     │ 5.35  │ AA   │
  │ 378 │ pastel       │ secondary, secondary-content │ 4.56  │ AA   │
  │ 379 │ pastel       │ accent, accent-content       │ 4.34  │      │
  │ 380 │ pastel       │ neutral, neutral-content     │ 3.83  │      │
  │ 381 │ pastel       │ info, info-content           │ 3.64  │      │
  │ 382 │ pastel       │ success, success-content     │ 3.66  │      │
  │ 383 │ pastel       │ warning, warning-content     │ 3.08  │      │
  │ 384 │ pastel       │ error, error-content         │ 3.43  │      │
  └─────┴──────────────┴──────────────────────────────┴───────┴──────┘

If you're seeing an issue, please report.

[wildFlo]

With WCAG 2 AA I think the contrast ratio targeted would be 4.5.1. I don't know which accessibility level is targeted in daisyUI ?

I don't think this test is sufficient as if we go https://daisyui.com/components/tab/ open the devTools and use axe devtools to test the accessibility we will see that we have a lot of minimum threshold of contrast not met and the one of them is not between color and color-content color but between the background (white) the the color of the text of the tab which is color-mix(in oklab,var(--color-base-content)50%,transparent). (Also the badges has some issues).

Maybe it is still interesting to run axe-core test on the different pages of the demo at least.
BR

[saadeghi]

which accessibility level is targeted in daisyUI

WCAG 2.2 minimum contrast ratio is 1:3 for large text.

For the reference, I think this is the tab you mentioned, which is perfectly readable.

The goal is definitely not winning in benchmarks, but to provide a readable text based on today's average display technologies and today's color technologies.

• WCAG is a flawed formula designed based on the technology of monitors from 20 years ago.
  Today, the cheapest and lowest-quality devices have better display quality than the monitors available when the WCAG formula was developed.
• WCAG is designed based on the RGB colors and can not calculate P3 colors (daisyUI uses P3 colors). What happens in benchmarks is P3 colors being converted to the closest RGB color just to be able to calculated a score for WCAG
• WCAG is unfortunately the only color contrast tool available widely so that's what every single contrast checker uses, including browsers like Chrome, and is the only thing available out there for libraries like daisyUI to use. We would use better standards if there were any.
• Readability depends on font size, font family, font weight, zoom level, pixel density, lighting, monitor display brightness, and monitor technologies. None of these are calculated in WCAG.
• All daisyUI themes and all colors are customizable. Built-in themes exist as an option but everyone can build their own theme.

Let me know if you have a question.

[wildFlo]

I am wondering then, as only we have this tool to test accessibility what to do. In my company the test are done following the wcag norm and the testing tool of the external audit are following this too, as well as the law in term of accessibility, so should we not try to follow it too waiting for new norm or tools to be in place ?
I understand that we want to provide a readable text and that the current value is readable according to your elements, and that if I want I can customize the colors to fit my wcag requirements.
I still feel strange to not follow it and have errors as such while testing it: