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:

[csabaxyz]

What about the soft and outline buttons? For example, here is how they look like in the cupcake theme:

Soft	Outline

Maybe the contrast also needs to be checked against the suggested background/base colors. But then again, when people want to use those buttons, they should probably make sure the background color is appropriate.

[saadeghi]

Yes. Soft and outline buttons have transparent or semi-transparent background colors.
You should use them on a proper background to make sure the text is readable.