[Case Study] Identyfikacja Wizualna & WCAG 2.1 — AccessSight & A11yShield

Klient / Projekt: System identyfikacji wizualnej dostosowany do wymogów dostępności cyfrowej (A11y / WCAG)

Rola: UI/UX Designer & Accessibility Specialist

Standardy: WCAG 2.1 Level AAA / AA

Format: Czysty kod wektorowy SVG, skrócone ścieżki, responsywny viewBox="0 0 500 200"

Dostępność: Wbudowane znaczniki aria-labelledby, <title> oraz <desc> dla czytników ekranu (screen readers)

1. Koncepcja 1: AccessSight

Sygnet łączy motyw oka (audyt cyfrowy), tarczy (ochrona i bezpieczeństwo) oraz symbolu potwierdzenia (zgodność z normami).

Tabela Kontrastu & Kolorystyki

Kod SVG (Ready-to-use)

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 500 200"
  width="500"
  height="200"
  role="img"
  aria-labelledby="accesssight-title accesssight-desc"
>
  <title id="accesssight-title">AccessSight</title>
  <desc id="accesssight-desc">
    AccessSight — audyt dostępności cyfrowej i zgodności z WCAG.
    Symbol oka połączony z tarczą i symbolem potwierdzenia.
  </desc>

  <!-- ==========================================================
       ACCESSSIGHT
       Digital Accessibility & WCAG Audits

       Primary Navy: #0F172A
       Accent Blue:  #0284C7
       White:        #FFFFFF
       ========================================================== -->

  <defs>
    <style>
      .navy {
        fill: #0F172A;
      }

      .blue {
        fill: #0284C7;
      }

      .wordmark {
        font-family:
          Inter,
          "Segoe UI",
          Roboto,
          Helvetica,
          Arial,
          sans-serif;
        font-size: 43px;
        font-weight: 700;
        letter-spacing: -1.8px;
      }
    </style>
  </defs>

  <!-- ==========================================================
       SYMBOL
       Eye + Shield + Check
       ========================================================== -->

  <g id="accesssight-symbol">

    <!-- Outer eye -->
    <path
      class="navy"
      d="
        M18 100
        C46 63 82 42 116 38
        C119 37.6 122 37.4 125 37.4
        C128 37.4 131 37.6 134 38
        C168 42 204 63 232 100
        C204 137 168 158 134 162
        C131 162.4 128 162.6 125 162.6
        C122 162.6 119 162.4 116 162
        C82 158 46 137 18 100
        Z

        M42 100
        C64 75 91 60 116 56.8
        C119 56.4 122 56.2 125 56.2
        C128 56.2 131 56.4 134 56.8
        C159 60 186 75 208 100
        C186 125 159 140 134 143.2
        C131 143.6 128 143.8 125 143.8
        C122 143.8 119 143.6 116 143.2
        C91 140 64 125 42 100
        Z
      "
      fill-rule="evenodd"
    />

    <!-- Subtle inner blue iris/ring -->
    <path
      class="blue"
      d="
        M125 67
        A33 33 0 1 1 125 133
        A33 33 0 1 1 125 67
        Z
      "
    />

    <!-- White separation -->
    <circle
      cx="125"
      cy="100"
      r="22"
      fill="#FFFFFF"
    />

    <!-- Shield -->
    <path
      class="blue"
      d="
        M125 73
        L151 82
        V103
        C151 120 141 133 125 142
        C109 133 99 120 99 103
        V82
        Z
      "
    />

    <!-- Shield highlight / checkmark -->
    <path
      d="
        M111 105
        L120 114
        L141 92
        L147 98
        L120 126
        L105 111
        Z
      "
      fill="#FFFFFF"
    />

  </g>

  <!-- ==========================================================
       WORDMARK
       ========================================================== -->

  <g
    id="accesssight-wordmark"
    class="wordmark"
    aria-label="AccessSight"
  >

    <text
      x="254"
      y="116"
      class="navy"
    >Access</text>

    <text
      x="390"
      y="116"
      class="blue"
    >Sight</text>

  </g>

</svg>

2. Koncepcja 2: A11yShield

Projekt oparty na geometrii tarczy biznesowej z wpisaną wewnątrz uniwersalną sylwetką dostępności cyfrowej. Dedykowany dla sektora B2G oraz audytów dostępności.

Tabela Kontrastu & Kolorystyki