axe-core report — light/dark × static/hover/active/focus-visible

Generated: 2026-07-22T23:10:13.953Z — 2 schemes × (1 static scan + enabled buttons × 3 states)

Summary

SchemeButtonStateViolation rulesViolating nodes
light (all) static 4 37
light fill/lg hover 0 0
light fill/lg active 0 0
light fill/lg focus-visible 0 0
light fill/md hover 0 0
light fill/md active 0 0
light fill/md focus-visible 0 0
light fill/sm hover 0 0
light fill/sm active 0 0
light fill/sm focus-visible 0 0
light fill/xs hover 0 0
light fill/xs active 0 0
light fill/xs focus-visible 0 0
light outlined/lg hover 0 0
light outlined/lg active 0 0
light outlined/lg focus-visible 0 0
light outlined/md hover 0 0
light outlined/md active 0 0
light outlined/md focus-visible 0 0
light outlined/sm hover 0 0
light outlined/sm active 0 0
light outlined/sm focus-visible 0 0
light outlined/xs hover 0 0
light outlined/xs active 0 0
light outlined/xs focus-visible 0 0
light text/lg hover 0 0
light text/lg active 0 0
light text/lg focus-visible 0 0
light text/md hover 0 0
light text/md active 0 0
light text/md focus-visible 0 0
light text/sm hover 0 0
light text/sm active 0 0
light text/sm focus-visible 0 0
light text/xs hover 0 0
light text/xs active 0 0
light text/xs focus-visible 0 0
light fill/lg hover 0 0
light fill/lg active 0 0
light fill/lg focus-visible 0 0
light fill/md hover 0 0
light fill/md active 0 0
light fill/md focus-visible 0 0
light fill/lg hover 0 0
light fill/lg active 0 0
light fill/lg focus-visible 0 0
dark (all) static 4 17
dark fill/lg hover 0 0
dark fill/lg active 0 0
dark fill/lg focus-visible 0 0
dark fill/md hover 0 0
dark fill/md active 0 0
dark fill/md focus-visible 0 0
dark fill/sm hover 0 0
dark fill/sm active 0 0
dark fill/sm focus-visible 0 0
dark fill/xs hover 0 0
dark fill/xs active 0 0
dark fill/xs focus-visible 0 0
dark outlined/lg hover 0 0
dark outlined/lg active 0 0
dark outlined/lg focus-visible 0 0
dark outlined/md hover 0 0
dark outlined/md active 0 0
dark outlined/md focus-visible 0 0
dark outlined/sm hover 0 0
dark outlined/sm active 0 0
dark outlined/sm focus-visible 0 0
dark outlined/xs hover 0 0
dark outlined/xs active 0 0
dark outlined/xs focus-visible 0 0
dark text/lg hover 0 0
dark text/lg active 0 0
dark text/lg focus-visible 0 0
dark text/md hover 0 0
dark text/md active 0 0
dark text/md focus-visible 0 0
dark text/sm hover 0 0
dark text/sm active 0 0
dark text/sm focus-visible 0 0
dark text/xs hover 0 0
dark text/xs active 0 0
dark text/xs focus-visible 0 0
dark fill/lg hover 0 0
dark fill/lg active 0 0
dark fill/lg focus-visible 0 0
dark fill/md hover 0 0
dark fill/md active 0 0
dark fill/md focus-visible 0 0
dark fill/lg hover 0 0
dark fill/lg active 0 0
dark fill/lg focus-visible 0 0

[light] (all) — static

Rule IDImpactDescriptionNodesSelectors / HTML
color-contrast serious Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds 21
  • .css-chip-label.css-icon[icon-type="hatch"]:nth-child(3)
    <span class="css-chip-label css-icon" css-type="fill" icon-type="hatch">
                tag</span>

    Fix any of the following: Element has insufficient color contrast of 3.2 (foreground color: #000000, background color: #0041ff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1

  • .css-field-error
    <p class="css-field-error" style="margin-top:1rem">エラーテキストが入ります。</p>

    Fix any of the following: Element has insufficient color contrast of 3.78 (foreground color: #ff2800, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1

  • .heading-row:nth-child(3) > .heading-meta
    <div class="heading-meta">h2.css-h css-size="display-1"</div>

    Fix any of the following: Element has insufficient color contrast of 2.84 (foreground color: #999999, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1

  • .heading-row:nth-child(4) > .heading-meta
    <div class="heading-meta">h2.css-h css-size="display-2"</div>

    Fix any of the following: Element has insufficient color contrast of 2.84 (foreground color: #999999, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1

  • .heading-row:nth-child(5) > .heading-meta
    <div class="heading-meta">h2.css-h css-size="heading-1"</div>

    Fix any of the following: Element has insufficient color contrast of 2.84 (foreground color: #999999, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1

  • .heading-row:nth-child(6) > .heading-meta
    <div class="heading-meta">h2.css-h css-size="heading-2"</div>

    Fix any of the following: Element has insufficient color contrast of 2.84 (foreground color: #999999, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1

  • .heading-row:nth-child(7) > .heading-meta
    <div class="heading-meta">h2.css-h css-size="heading-3"</div>

    Fix any of the following: Element has insufficient color contrast of 2.84 (foreground color: #999999, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1

  • .heading-row:nth-child(8) > .heading-meta
    <div class="heading-meta">h2.css-h css-size="heading-4"</div>

    Fix any of the following: Element has insufficient color contrast of 2.84 (foreground color: #999999, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1

  • .heading-row:nth-child(9) > .heading-meta
    <div class="heading-meta">h2.css-h css-size="heading-6"</div>

    Fix any of the following: Element has insufficient color contrast of 2.84 (foreground color: #999999, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1

  • .heading-row:nth-child(10) > .heading-meta
    <div class="heading-meta">h2.css-h css-size="heading-8"</div>

    Fix any of the following: Element has insufficient color contrast of 2.84 (foreground color: #999999, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1

  • .heading-row:nth-child(11) > .heading-meta
    <div class="heading-meta">h2.css-h css-size="heading-9"</div>

    Fix any of the following: Element has insufficient color contrast of 2.84 (foreground color: #999999, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1

  • .heading-row:nth-child(12) > .heading-meta
    <div class="heading-meta">h2.css-h css-size="text-normal-2"</div>

    Fix any of the following: Element has insufficient color contrast of 2.84 (foreground color: #999999, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1

  • .heading-row:nth-child(14) > .heading-meta
    <div class="heading-meta">hgroup[css-size="heading-2"] &gt; h2.css-h</div>

    Fix any of the following: Element has insufficient color contrast of 2.84 (foreground color: #999999, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1

  • .heading-row:nth-child(16) > .heading-meta
    <div class="heading-meta">h2.css-h css-size="heading-2" data-chip</div>

    Fix any of the following: Element has insufficient color contrast of 2.84 (foreground color: #999999, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1

  • .heading-row:nth-child(17) > .heading-meta
    <div class="heading-meta">hgroup[css-size="heading-2"][data-chip] &gt; h2.css-h — shoulder あり</div>

    Fix any of the following: Element has insufficient color contrast of 2.84 (foreground color: #999999, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1

  • .heading-row:nth-child(19) > .heading-meta
    <div class="heading-meta">h2.css-h css-size="heading-2" data-rule="8"</div>

    Fix any of the following: Element has insufficient color contrast of 2.84 (foreground color: #999999, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1

  • .heading-row:nth-child(20) > .heading-meta
    <div class="heading-meta">h2.css-h css-size="heading-2" data-rule="6"</div>

    Fix any of the following: Element has insufficient color contrast of 2.84 (foreground color: #999999, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1

  • .heading-row:nth-child(21) > .heading-meta
    <div class="heading-meta">h2.css-h css-size="heading-2" data-rule="4"</div>

    Fix any of the following: Element has insufficient color contrast of 2.84 (foreground color: #999999, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1

  • .heading-row:nth-child(22) > .heading-meta
    <div class="heading-meta">h2.css-h css-size="heading-2" data-rule="2"</div>

    Fix any of the following: Element has insufficient color contrast of 2.84 (foreground color: #999999, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1

  • .heading-row:nth-child(24) > .heading-meta
    <div class="heading-meta">h2.css-h css-size="heading-2" data-chip data-rule="4"</div>

    Fix any of the following: Element has insufficient color contrast of 2.84 (foreground color: #999999, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1

  • .css-search-box-scope > span
    <span>検索対象</span>

    Fix any of the following: Element has insufficient color contrast of 4.12 (foreground color: #737373, background color: #efefef, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
label critical Ensure every form element has a label 6
  • .css-input[type="text"][css-size="md"]:nth-child(2)
    <input class="css-input" type="text" css-size="md" aria-invalid="true" style="margin-top:1rem;display:block">

    Fix any of the following: Element does not have an implicit (wrapped) <label> Element does not have an explicit <label> aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute Element has no placeholder attribute Element's default semantics were not overridden with role="none" or role="presentation"

  • input[value="読み取り専用の値"]
    <input class="css-input" type="text" css-size="md" value="読み取り専用の値" readonly="" style="margin-top:1rem;display:block">

    Fix any of the following: Element does not have an implicit (wrapped) <label> Element does not have an explicit <label> aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute Element has no placeholder attribute Element's default semantics were not overridden with role="none" or role="presentation"

  • input[value="無効"]
    <input class="css-input" type="text" css-size="md" value="無効" disabled="" style="margin-top:1rem;display:block">

    Fix any of the following: Element does not have an implicit (wrapped) <label> Element does not have an explicit <label> aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute Element has no placeholder attribute Element's default semantics were not overridden with role="none" or role="presentation"

  • textarea:nth-child(4)
    <textarea class="css-textarea" style="margin-top:1rem;display:block" aria-invalid="true"></textarea>

    Fix any of the following: Element does not have an implicit (wrapped) <label> Element does not have an explicit <label> aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute Element has no placeholder attribute Element's default semantics were not overridden with role="none" or role="presentation"

  • textarea[readonly=""]
    <textarea class="css-textarea" style="margin-top:1rem;display:block" readonly="">読み取り専用の値</textarea>

    Fix any of the following: Element does not have an implicit (wrapped) <label> Element does not have an explicit <label> aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute Element has no placeholder attribute Element's default semantics were not overridden with role="none" or role="presentation"

  • textarea:nth-child(6)
    <textarea class="css-textarea" style="margin-top:1rem;display:block" disabled="">無効</textarea>

    Fix any of the following: Element does not have an implicit (wrapped) <label> Element does not have an explicit <label> aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute Element has no placeholder attribute Element's default semantics were not overridden with role="none" or role="presentation"
select-name critical Ensure select element has an accessible name 4
  • .css-select:nth-child(1)
    <select class="css-select" css-size="md" style="display:block">
            <option value="">選択してください</option>
            <option value="1">選択肢1</option>
            <option value="2">選択肢2</option>
            <option value="3">選択肢3</option></select>

    Fix any of the following: Element does not have an implicit (wrapped) <label> Element does not have an explicit <label> aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute Element's default semantics were not overridden with role="none" or role="presentation"

  • .css-select:nth-child(2)
    <select class="css-select" css-size="md" aria-invalid="true" style="display:block; margin-top:1rem">
            <option value="">選択してください</option>
            <option value="1">選択肢1</option></select>

    Fix any of the following: Element does not have an implicit (wrapped) <label> Element does not have an explicit <label> aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute Element's default semantics were not overridden with role="none" or role="presentation"

  • .css-select:nth-child(3)
    <select class="css-select" css-size="md" disabled="" style="display:block;margin-top:1rem">
            <option value="">選択してください</option></select>

    Fix any of the following: Element does not have an implicit (wrapped) <label> Element does not have an explicit <label> aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute Element's default semantics were not overridden with role="none" or role="presentation"

  • select[multiple=""]
    <select class="css-select" multiple="" style="display:block;margin-top:1rem">

    Fix any of the following: Element does not have an implicit (wrapped) <label> Element does not have an explicit <label> aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute Element's default semantics were not overridden with role="none" or role="presentation"
target-size serious Ensure touch targets have sufficient size and space 6
  • button[aria-label="名前 昇順"]
    <button class="css-sort-up" type="button" aria-label="名前 昇順"></button>

    Fix any of the following: Target has insufficient size (24px by 12px, should be at least 24px by 24px) Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 0px instead of at least 24px.

  • button[aria-label="名前 降順"]
    <button class="css-sort-down" type="button" aria-label="名前 降順"></button>

    Fix any of the following: Target has insufficient size (24px by 12px, should be at least 24px by 24px) Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 0px instead of at least 24px.

  • button[aria-label="日付 昇順"]
    <button class="css-sort-up" type="button" aria-label="日付 昇順"></button>

    Fix any of the following: Target has insufficient size (24px by 12px, should be at least 24px by 24px) Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 0px instead of at least 24px.

  • button[aria-label="日付 降順"]
    <button class="css-sort-down" type="button" aria-label="日付 降順"></button>

    Fix any of the following: Target has insufficient size (24px by 12px, should be at least 24px by 24px) Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 0px instead of at least 24px.

  • button[aria-label="金額 昇順"]
    <button class="css-sort-up" type="button" aria-label="金額 昇順"></button>

    Fix any of the following: Target has insufficient size (24px by 12px, should be at least 24px by 24px) Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 0px instead of at least 24px.

  • button[aria-label="金額 降順"]
    <button class="css-sort-down" type="button" aria-label="金額 降順"></button>

    Fix any of the following: Target has insufficient size (24px by 12px, should be at least 24px by 24px) Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 0px instead of at least 24px.

[dark] (all) — static

Rule IDImpactDescriptionNodesSelectors / HTML
color-contrast serious Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds 1
  • .css-search-box-scope > span
    <span>検索対象</span>

    Fix any of the following: Element has insufficient color contrast of 3.27 (foreground color: #8c8c8c, background color: #3c3c3d, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
label critical Ensure every form element has a label 6
  • .css-input[type="text"][css-size="md"]:nth-child(2)
    <input class="css-input" type="text" css-size="md" aria-invalid="true" style="margin-top:1rem;display:block">

    Fix any of the following: Element does not have an implicit (wrapped) <label> Element does not have an explicit <label> aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute Element has no placeholder attribute Element's default semantics were not overridden with role="none" or role="presentation"

  • input[value="読み取り専用の値"]
    <input class="css-input" type="text" css-size="md" value="読み取り専用の値" readonly="" style="margin-top:1rem;display:block">

    Fix any of the following: Element does not have an implicit (wrapped) <label> Element does not have an explicit <label> aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute Element has no placeholder attribute Element's default semantics were not overridden with role="none" or role="presentation"

  • input[value="無効"]
    <input class="css-input" type="text" css-size="md" value="無効" disabled="" style="margin-top:1rem;display:block">

    Fix any of the following: Element does not have an implicit (wrapped) <label> Element does not have an explicit <label> aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute Element has no placeholder attribute Element's default semantics were not overridden with role="none" or role="presentation"

  • textarea:nth-child(4)
    <textarea class="css-textarea" style="margin-top:1rem;display:block" aria-invalid="true"></textarea>

    Fix any of the following: Element does not have an implicit (wrapped) <label> Element does not have an explicit <label> aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute Element has no placeholder attribute Element's default semantics were not overridden with role="none" or role="presentation"

  • textarea[readonly=""]
    <textarea class="css-textarea" style="margin-top:1rem;display:block" readonly="">読み取り専用の値</textarea>

    Fix any of the following: Element does not have an implicit (wrapped) <label> Element does not have an explicit <label> aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute Element has no placeholder attribute Element's default semantics were not overridden with role="none" or role="presentation"

  • textarea:nth-child(6)
    <textarea class="css-textarea" style="margin-top:1rem;display:block" disabled="">無効</textarea>

    Fix any of the following: Element does not have an implicit (wrapped) <label> Element does not have an explicit <label> aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute Element has no placeholder attribute Element's default semantics were not overridden with role="none" or role="presentation"
select-name critical Ensure select element has an accessible name 4
  • .css-select:nth-child(1)
    <select class="css-select" css-size="md" style="display:block">
            <option value="">選択してください</option>
            <option value="1">選択肢1</option>
            <option value="2">選択肢2</option>
            <option value="3">選択肢3</option></select>

    Fix any of the following: Element does not have an implicit (wrapped) <label> Element does not have an explicit <label> aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute Element's default semantics were not overridden with role="none" or role="presentation"

  • .css-select:nth-child(2)
    <select class="css-select" css-size="md" aria-invalid="true" style="display:block; margin-top:1rem">
            <option value="">選択してください</option>
            <option value="1">選択肢1</option></select>

    Fix any of the following: Element does not have an implicit (wrapped) <label> Element does not have an explicit <label> aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute Element's default semantics were not overridden with role="none" or role="presentation"

  • .css-select:nth-child(3)
    <select class="css-select" css-size="md" disabled="" style="display:block;margin-top:1rem">
            <option value="">選択してください</option></select>

    Fix any of the following: Element does not have an implicit (wrapped) <label> Element does not have an explicit <label> aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute Element's default semantics were not overridden with role="none" or role="presentation"

  • select[multiple=""]
    <select class="css-select" multiple="" style="display:block;margin-top:1rem">

    Fix any of the following: Element does not have an implicit (wrapped) <label> Element does not have an explicit <label> aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute Element's default semantics were not overridden with role="none" or role="presentation"
target-size serious Ensure touch targets have sufficient size and space 6
  • button[aria-label="名前 昇順"]
    <button class="css-sort-up" type="button" aria-label="名前 昇順"></button>

    Fix any of the following: Target has insufficient size (24px by 12px, should be at least 24px by 24px) Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 0px instead of at least 24px.

  • button[aria-label="名前 降順"]
    <button class="css-sort-down" type="button" aria-label="名前 降順"></button>

    Fix any of the following: Target has insufficient size (24px by 12px, should be at least 24px by 24px) Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 0px instead of at least 24px.

  • button[aria-label="日付 昇順"]
    <button class="css-sort-up" type="button" aria-label="日付 昇順"></button>

    Fix any of the following: Target has insufficient size (24px by 12px, should be at least 24px by 24px) Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 0px instead of at least 24px.

  • button[aria-label="日付 降順"]
    <button class="css-sort-down" type="button" aria-label="日付 降順"></button>

    Fix any of the following: Target has insufficient size (24px by 12px, should be at least 24px by 24px) Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 0px instead of at least 24px.

  • button[aria-label="金額 昇順"]
    <button class="css-sort-up" type="button" aria-label="金額 昇順"></button>

    Fix any of the following: Target has insufficient size (24px by 12px, should be at least 24px by 24px) Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 0px instead of at least 24px.

  • button[aria-label="金額 降順"]
    <button class="css-sort-down" type="button" aria-label="金額 降順"></button>

    Fix any of the following: Target has insufficient size (24px by 12px, should be at least 24px by 24px) Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 0px instead of at least 24px.